Answers for "angular directive"

angular directive output

// just use it normal
@Output() itch:EventEmitter<any> = new EventEmitter();

//and call in html
<div appCollar (itch)='scratch()' >

angular directive

//generate Angular Directives
ng generate directive highlight

//it will generate the following component
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}
// you can use the directive in the template as:
<p appHighlight> highlighted text </p>

angular directive

content_copy
      
      <p app:Highlight>This is invalid</p>

user defined directives in angular 7

import { Directive, ElementRef } from '@angular/core';

directives in angular

content_copy
      
      <!-- toggle the "special" class on/off with a property -->
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>

user defined directives in angular 7

<p [ngStyle]="{`THE CSS YOPU WANT TO ADD`}"> I am an Attribute Directive</p>