Components
Component controls the user interface of Angular. We can make as many components according to the requirement. As Angular is a single page application, we use components instead of using multipage.
To create a component, we firstly we go into the app directory and then create a new component by ng command on the shell.
Command:
cd app
ng generate component comp1
OR
cd app
ng g c comp1
Selector
The selector denotes which component is to be selected. A selector can be used directly by typing element name, selector: ‘app-element’. The selector can be used as an attribute selector by putting the selector into square brackets, selector: ‘[app-element]’
The selector can also be selected by class just like in CSS by putting a dot before the CSS,
selector: ‘.app-element’
The selector can be used directly by typing element-name directly like a legacy selector:
@Component({
selector: 'app-element',
template: './element.component.html',
styleUrls: ['./element.component.css']
})
This type of selector can be accessed directly by typing the selector name inside the <> brackets as:
<app-element></app-element>
b) The selector can be used as attribute selector by putting the selector into square brackets:
@Component({
selector: '[app-element]',
template: './element.component.html',
styleUrls: ['./element.component.css']
})
In this, we changed the selector to be an attribute. To use this attribute selector, we have to put the attribute inside a div or any other element as:
<div app-element></div>
c) The selector can also be select by class just like in CSS by putting a dot before app-element:
@Component({
selector: '.app-element',
template: './element.component.html',
styleUrls: ['./element.component.css']
})
Template
The template is the HTML view we are creating for the component. The template attribute of a component looks like:
@Component({
selector: 'app-root',
template: `
<ng-template>
<button class="tab-button"
(click)="login()">{{loginText}}</button>
<button class="tab-button"
(click)="signUp()">{{signUpText}}</button>
</ng-template>
`})
Styles
In this, we can add the property of CSS. The styles attribute of a component looks like :
@Component({
selector: 'hero-app',
template: `
<h1>Tour of Heroes</h1>
<hero-app-main [hero]=hero></hero-app-main>`,
styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}