Directives is just an Instruction that tells to Angular what to do.
Directives are three types:
Component
import {Component} from 'angular/core'
@Component({
selector: 'my-app',
template: `<h3>The Super Button</h3><button (click)="btnClick()">Click Me</button>`
})
export class App {
}
Attributes
Attributes Directives interact with the Element to which they are applied to (e.g. change the style) (Examples: ngClass, ngStyle)
Structural
Structural Directive interact with the current view container and change the structure of the DOM/HTML Code.
(Examples: *ngIf, *ngFor)
Ng-Content Directive
Ng-content will be show directive contents.
<app-home>Hello there!</app-home>
Use ng-content on home component file.
<ng-content></ng-content>