Angular Useful Directives Samples

AngularDirectivesSamples.ts

(ngModelChange)=
[(ngModel)]
(blur)=
(keyup)=
(click)=
(focus)=
 *ngFor="let option of options | async"
 *ngIf="xxxx"
         <td>{{ product?.productName }}</td>

 
 [class.error]="xxx"
 routerLink="/login"
 [class.disabled]="!formEmail.valid"
[disabled]="!formEmail.valid"
[type]="showpassword ? 'text' : 'password'"
(paste)="false"
 [ngClass]="search.smartSearch && !selectedValue ||  isActive  ? 'd-block' : 'd-none'"
  @Input('service') public service: any;
  @Input('method') public method: string;
  @Input() public options: any[] = [];
  public isActive: boolean = false;
  public pageSize: number = 50;
  @Input('defaultValue') public defaultValue: any = {};
*ngIf="!currentPage?.content?.length">
 <option [ngValue]="undefined" hidden>Selecione</option>
 <div class="progress-bar__circle" [ngClass] = "{ 'progress-bar__circle--completed': accountCreated , 'progress-bar__circle--selected' : stepsData.clinicStep.enable }">
 (change)="xx" like you mentioned triggers only when the input loses focus, hence is of limited use.
(keypress)="xx" triggers on key presses but doesn't trigger on certain keystrokes like the backspace.
(keydown)="xx" triggers every time a key is pushed down. Hence always lags by 1 character; as it gets the element state before the keystroke was registered.
(keyup)="xx" is your best bet as it triggers every time a key push event has completed, hence this also includes the most recent character.
  setTimeout(function() {
               this.emailRegex.test(this.user.email) ? this.emailFormatValid = true: this.emailFormatValid = false;
           }, 3000);

[attr.maxlength]= 'your value'
<input type="text" [maxLength]="mxLength">
 
 
pass data to another component...
 @Input('customPlaceholder') public customPlaceholder: string;
<component inputField="string"></component>
<component [inputField]="'string'"></component>
<component inputField="{{'string'}}"></component>

// Full list of Angular Events

(click)="myFunction()"      
(dblclick)="myFunction()"   

(submit)="myFunction()"

(blur)="myFunction()"  
(focus)="myFunction()" 

(scroll)="myFunction()"

(cut)="myFunction()"
(copy)="myFunction()"
(paste)="myFunction()"

(keyup)="myFunction()"
(keypress)="myFunction()"
(keydown)="myFunction()"

(mouseup)="myFunction()"
(mousedown)="myFunction()"
(mouseenter)="myFunction()"

(drag)="myFunction()"
(drop)="myFunction()"
(dragover)="myFunction()"




Good question pra fazer -->
    <span class="bold mr-10">{{selectedCars3?.length}}</span>
          <span class="mr-10 bold" *ngIf="selectedCars3?.length > 1" >Itens Selecionados</span>
          <span class="mr-10 bold " *ngIf="selectedCars3?.length == 1" >Item Selecionado</span>


<div *ngIf="isValid;then content else other_content">here is ignored</div>    
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>

 <ng-container [ngSwitch]="true">
    <div *ngSwitchCase="foo === 1">First</div>
    <div *ngSwitchCase="bar === 2">Second</div>
    <div *ngSwitchDefault>Third</div>
  </ng-container>
  
  //Template 
  <ng-template #loading>
    <div>Loading...</div>
</ng-template>

<div *ngTemplateOutlet="loading"></div> 

[style.visibility]="(hideAddButton == 0) ? 'hidden' : 'visible' "

   [ngClass]="{
                                'operation': getStatusType(equipment) === 'OPERATION',
                                'operationDowntime': getStatusType(equipment) === 'OPERATIONAL_DOWNTIME',
                                'faultDowntime' : getStatusType(equipment) === 'FAULT_DOWNTIME',
                                'maintenanceDowntime' : getStatusType(equipment) === 'MAINTENANCE_DOWNTIME'
                             }"


    [ngClass]="{'withouFixedFront' : !getFixeFront(equipment)}">

 <div class="checkbox-layout-left" >
  <div *ngFor="let item of checkedList; let i= index "  class="checkbox-list pr-15 pl-15"  >
    <i  class="mr-10 glyphicon" 
       [ngClass]="[item.isSelected ? 'glyphicon-check colorIndex'+ i : 'glyphicon-unchecked']"
       (click)="setValue(i)">
    </i>
    <div style="font-weight: bold;" [ngClass]="[item.isSelected ? 'colorIndex'+ i : 'text-muted']">{{item.value}}</div>  
  </div>
</div>

Mapping itens of array with rxjs
Wrong
/*  this.operatorEntityService.getAll().subscribe(x => {
            this.operators = x;
            this.cars = this.operators.map((x : Operator) => ({
              label: x.user.name,
              value: x.registration
            }));
          });

Right 
 getUsers(): Observable<SelectItem[]> {
        return this.operatorEntityService.getAll()
        .pipe(
            map((items: any) => items.map(item => ({
                label: item.user.name,
                value: item.registration
              })))
          )
     } 

[ngClass]="{'class1':condition1, 
            'class2': condition2, 
            'class3':condition3}"
            
            
  ngOnChanges(changes: any) {
        if(changes){
            this.index = changes.filterState.currentValue ? -1 : null; 
        }
    }