Component in Angular

Component in Angular

A component is a basic building block of UI in an Angular. it controls on UI of application. it is easily reusable.

or we can say Components are defined using the @component decorator. A component has a selector, template, style, and other properties, using which it specifies the metadata required to process the component.

How to create Component

we have angular CLI command of creating an angular component

ng generate component component-name

in short form, we can write it as

ng g c component-name

once you hit this command below file will add inside the component directory

• HTML: it defines user interface which contains HTML/View of Application, directive & data binding
• CSS: it has the style of the respective component
• TS: (it is typescript file, we have to import component class inside TS file, it has class, decorator)
• Spec: The spec files are unit tests for your source files. The convention for Angular applications is to have a .spec.ts file for each .ts file. They are run using the Jasmine javascript test framework through the Karma test runner when you use the ng test command.

now comes on TS file which has import, decorator, export, class keyword what are they?

1. import component class from the angular library.

     import { Component, OnInit } from '@angular/core';

2. decorator: here decorator denoted by @ & decorator name is Component, decorator is a function we can pass object as parameters. it metadata that has extra information of data.

    @Component({
  selector: 'app-questions-view',
  templateUrl: './questions-view.component.html',
  styleUrls: ['./questions-view.component.scss']
    })

we have below metadata

selector: A CSS selector that tells Angular to create and insert an instance of this
component wherever it finds the corresponding tag in template HTML. For example, if an app’s HTML contains <app-questions-view></app-questions-view>,

then Angular inserts an instance of the QuestionsViewComponent view between those tags.

-Template: inline HTML

-template URL: define path of external HTML

-Style: Inline CSS

-styleStyleURL: define Path of external css

3.class: class is typescript function or object inside we do coding, data binding, methods.

    export class QuestionsViewComponent implements OnInit {
     questionOne: string = "what is component in Angular"
      constructor() { }
      ngOnInit() {
  }
     }