Please enable JavaScript.
Coggle requires JavaScript to display documents.
Directives (Structural Directives (look like normal attr but with leading…
Directives
Structural Directives
look like normal attr
but with leading *
affect whole area in DOM
only one struct directive
on element
angular transform it into
ng-template with binded property
Build-in
*ngIf
*ngFor
[ngClass]
[ngStyle]
Build Structural Directive
Input()
property with
with only setter will run method
get ng-template in constructor
by type TemplateRef<any>
get view container in constructor
of type ViewContainerRef
container ref methods:
createEmbeddedView(templateRef)
clear()
Creating Custom
Directive
selector
inject in constructor element
o which is custom dir declared
of type ElementRef
add in declarations arr
in
NgModule
Renderer2
inject in constructor
along with ElementRef
methods to work with dom
setStyle(ElementRef.nativeElement),
best approach for
dom manipulation
HostListener('event_name')
react to events on element
that dir sits on
method with decorator
hostListener('mouseenter')
mouseover(eventData: Event){}
Attribute Directives
look like normal attr
affect/change only
element they are added
HostBinding('hostPropertyName')
bind to host property
HostBinding('style.backgroundColor')
backgroundColor: string;
Binding to Directive
Properties
Input()
on property
set input alias to directive
selector to bind directly to
directive
[ngSwitch]="value"
*ngSwitchCase="5"
*ngSwitchDefault