Angular Artifact for Directive

>introduction Directive
Attribute       and Structural directive
[No Dom change]    [Dom Change]

Why cant we add multiple directive on same element like we can not use ngIf and ngFor on same element
> Gettting started with Directive
create a class with @Directive Devorator and [selector] as a paramter to decorator
using elementRef to change to style of an element 

Note: Remember changing element style using [element.nativeElement.style.backgrroundColor] may not be available because Angular can render 
template even without DOM , and this is a DOM property. 
* this scenario can be encountered in Service Worker when Angular can directly render element without using DOM

To overcome this we use Renderer2 which help angular to change property of an element

Now to react to an event associated with an element we use @HostListener() directive
@HostListner() is Method decorator which is associated with a method like below

 @HostListener('mouseenter') mouseenter(eventData: Event) {
    this.renderer.setStyle(
      this.elementRef.nativeElement,
      'background-color',
      'orange'
    );
    // this.backgroundColor = 'orange';
  }
  
  ** Above we are using Renderer@ but we can use even simpler approch using a decorator @HostBinding()
  @HostBinding() is a Property Decorator which is applied to Directive attribute
    @HostBinding('style.backgroundColor') backgroundColor: string;
    
    Now using backgroundColor we can change element color 
  
  > Pass data to directive using property binding
  
  yeah , now you can pass data to the directive and change the dom based on this property 
  example can be changing background color based on developer's need
    @Input() defaultColor = 'white';  >> defaultColor Property will now acceess the property from Template
    
     <li
            appBetterHighlisht
            [defaultColor]="'grey'"
            [alternateColor]="'pink'"
            
          >
            {{ n }}
          </li>
================================================================================
>Creating a Structural Directive
Structural directive changes the DOM.
to manipulate DOM we need 2 things 
1) what to insert into DOM : TemplateRef can help what to render into DOM
2) where to render : ViewConteinerRef can help to find where to render templateRef into DOM

export class UnlessDirective {
  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.viewRef.createEmbeddedView(this.templateRef);
    } else {
      this.viewRef.clear();
    }
  }
  constructor(
    private templateRef: TemplateRef<any>,
    private viewRef: ViewContainerRef
  ) {}
}

*Note we are using a setter property because we want that whenever there is a change in property some function must get execute 
In Typescript we do this by using setter method, so whenever property changes setter method will get executed
Also the name of setter must be same as Structural directive [but why ? ]

Now this can be used using <div *appUnless="onlyOdd">