So what are angular 7 selectors ? Let’s learn it by a simple example.
Let’s say index.html file of your angular app looks something like this :
<body> <app-root></app-root> </body>
And your app.component.ts files looks something like this :
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
As you can see above selector is a ‘app-root’ which is also our custom html tag in index.html file. So basically by defining that tag in selector you can control where your Angular application will be played. It works same as CSS selectors. For example if you want to give CSS to <h3></h3> tag then in CSS you write it like h3{ color: red; }
In Angular 7 you can use same syntax.
There are three ways using which you can specify selectors :
1) Using class like :
app-component.ts file
selector : '.app-selector'
2) Using attribute like :
app-component.ts file
selector : '[app-selector]'
3) Standard usage :
app-component.ts file
selector : 'app-selector'
Important :
- Selecting element by ID won’t work in Angular
- Also pseudo elements does not work here.
No teacher is bigger than curiosity 