Defining a Component using Selector, Template, Styles in Angular

|
| By Webner

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 {
/* . . . */
}

’.” image-3=”” count=”4″ html=”true” css_class=””]

Leave a Reply

Your email address will not be published. Required fields are marked *