angular8 custom pipeline, the instruction value and obtaining dom

version:

 

 1, custom pipeline:

example: * ngFor define a key value may be acquired conduit

keyObject.pipe.ts

// key value 管道
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'getKeys'
})

export class keyValue implements  PipeTransform  {
    transform(value, args: string[]): any {
        let keys = [];
        for (let key in Object.keys(value)) {
            console.log(key);
            keys.push({ key: key, value: value[key] });
        }
        return keys;
    }
}

// 使用操作
/*
step 1
    app.module.ts 引入
    import { keyValue } from './common/keyObject.pipe';
    @NgModule({
      declarations: [
        keyValue,
      ],
step 2
    // 循环的时候使用
    // 原始值[{name: '', point: ''}]
    // 转换的值[{key:0 , value:{name: '', point: ''}}]
    <div *ngFor="let item of chipsList | getKeys">{{item.value.name}}<input type="number" step="0.01" min="0"
        [value]="item.value.point" (change)="this.changeValue(item.key);" class="inputClass" /></div>
    
*/

2, custom instructions:

example: define a high-light display into the instruction tag

highLight.ts

// highlight指令
import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({

  selector: '[appHighlight]'

})

export class HighlightDirective {

@Input('appHighlight')  highlightColor: string;  //highlightColor是appHighlight指令的别名

  constructor(private el: ElementRef) {
  //  el.nativeElement.style.backgroundColor = 'yellow';
  }
  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
  @HostListener('mouseenter') onMouseEnter() {
    this.highlight ( the this .highlightColor); 
  } 

  @HostListener ( 'MouseLeave' ) onMouseLeave () {
     the this .highlight ( null ); 
  } 
} 

// use the operating 
/ * 
STEP. 1 
    app.module.ts introduced 
    import {HighlightDirective} from '. / Common / highLight '; 
    @NgModule ({ 
      Declarations: [ 
        HighlightDirective, 
      ], 
STEP 2 
    pair of a tag using a high light 
    this.color =' yellow '; // ts file defines the colors 
    <p [appHighlight] = "color "> </ the p-> 
    
* /

3, using the content of the native html dom

example: obtaining input box value value

Old-style : document.getElementsByClassName ( 'inputClass') [ index]) value can be obtained values, but the error output console, and package failure.
Correct wording : <HTMLInputElement> document.getElementsByClassName ( 'inputClass ') [ index]). value so that the value may be acquired, the console is no error, no error will be packaged

Similarly acquired image src attribute of <HTMLImageElement>