Shulou(Shulou.com)05/31 Report--

This article focuses on "how to use angular instructions and pipes". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use angular instructions and pipes.

Instruction Directive

Directive is a way for Angular to manipulate DOM. Instructions are divided into attribute instructions and structure instructions.

Attribute directive: modify the appearance or behavior of an existing element, using [] wrappers.

Structural instructions: add or delete DOM nodes to modify the layout, using * as the instruction prefix.

1. Built-in instruction

1.1 * ngIf

Render DOM nodes or remove DOM nodes based on conditions.

No more data, course list, no more data.

Ng-template is used to define templates, and when a template is defined using ng-template, it can be used with ng-container and templateOutlet instructions.

Login sigup

1.2 [hidden]

Show the DOM node or hide the DOM node (display) depending on the condition.

There is no more data in the course list

1.3 * ngFor

Traversing data to generate HTML structure

Interface List {id: number name: string age: number} list: List [] = [{id: 1, name: "Zhang San", age: 20}, {id: 2, name: "Li Si", age: 30}] identify (index, item) {return item.id;}

2. Custom instruction

Requirements: set the default background color for the element, the background color when the mouse is moved in and the background color when the mouse is moved out.

Hello Angularimport {AfterViewInit, Directive, ElementRef, HostListener Input} from "@ angular/core" / / interface Options {bgColor?: string} @ Directive ({selector: "[appHover]"}) export class HoverDirective implements AfterViewInit {/ / receive parameter @ Input ("appHover") appHover: Options = {} / / DOM node element: HTMLElement / / get the DOM node constructor (private elementRef: ElementRef) {this.element = this. ElementRef.nativeElement} / / after the initial completion of the component template, set the background color of the element ngAfterViewInit () {this.element.style.backgroundColor = this.appHover.bgColor | | "skyblue"} / / add a mouse move event @ HostListener ("mouseenter") enter () {this.element.style.backgroundColor = "pink"} / / add a mouse move event to the element Piece @ HostListener ("mouseleave") leave () {this.element.style.backgroundColor = "skyblue"}} Pipe Pipe

The purpose of a pipe is to format component template data.

1. Built-in pipe

Date date formatting

Currency currency format

Uppercase turns uppercase

Lowercase to lowercase

Json formats json data

{{date | date: "yyyy-MM-dd"}}

2. Custom pipes

Requirement: the specified string cannot exceed the specified length

{{'this is a test' | summary: 3}} / / summary.pipe.tsimport {Pipe, PipeTransform} from'@ angular/core';@Pipe ({name: 'summary'}); export class SummaryPipe implements PipeTransform {transform (value: string, limit?: number) {if (! value) return null; let actualLimit = (limit)? Limit: 50; return value.substr (0, actualLimit) + '...';} / app.module.tsimport {SummaryPipe} from'. / summary.pipe'@NgModule ({declarations: [SummaryPipe]}); now that you have a better understanding of "how to use angular instructions and pipes", you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.