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

This article introduces the relevant knowledge of "pipeline case analysis in Angular". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

What is a PIPE

PIPE, translated as a pipe. The Angular pipeline is a way to write display value transformations that can be declared in a HTML component. Angular pipes were previously called filters in AngularJS and have been called pipes since Angular 2. The pipeline takes the data as input and converts it to the desired output.

Simply put, Angular Pipes can help us convert our input, including strings, integers, dates, etc., into a specific format and display it in the browser according to our needs. With interpolation expressions, we can define pipes and use them in specific situations, providing us with many different types of pipes in Angular, and of course, you can even customize pipes.

To take a relatively simple example, dates are in a variety of formats, and you can convert them through pipelines, such as converting seconds into hours.

Built-in pipe

As mentioned above, Angular provides us with many different types of pipes, all of which are built-in pipes that belong to Angular. As for what the built-in pipes have and how to use them, the following code demonstrates them.

Time pipeline date

Let's create a new Angular project and add a new Date () to the page:

{{data}}... export class AppComponent {title = 'my-app'; data = new Date ()}

The page displays the current time:

Then we can use the built-in pipe to convert the time format. The syntax of the pipe needs to add a | symbol after the variable and declare the pipeline.

{{data | date:'yyyy-MM-dd'}}

Here we use the date pipe, and after we set up the pipe, the time in the browser has changed.

Other pipes

Angular also provides other channels, such as currency to change the format of personal currency:

Angular-CurrencyPipe

Https://angular.cn/api/common/CurrencyPipe

There is also a uppercase to convert strings to uppercase:

{{'ASDasd' | uppercase}}

Angular-UpperCasePipe

Https://angular.cn/api/common/UpperCasePipe

Custom Pip

In the above we introduced several built-in pipes, in case the built-in pipes can not meet the needs of our development, then Angular also provides us with a custom pipeline, you can customize a pipeline to define how to convert the input.

We can quickly generate a pipe through the command line provided to us by Angular:

Ng g p pipes/pipe-name

Here I created a pipe called test

After you run the above instructions, a pipes folder will be created for you under src, in which your custom pipes will be saved.

Then Angular will automatically introduce these pipes for you in app so that you can use custom pipes everywhere in the world.

Then you see the pipe under the pipes folder, which is essentially a class, and here the decorator is used to give it the name tests.

In this class, we need to implement the interface PipeTransfrom, that is, we need to have the transform method. In this method, the first parameter is to put the input into the pipe, and the second data is the parameter we passed to the pipe, which is put into an array in the pipeline.

What the transform method returns is the data that our page gets. Let's do a test first.

Transform (value: unknown,... args: unknown []): unknown {return 'tests';}... {{' ASDasd' | tests}}

Return a fixed string and use it on the page

You can see that the returned result becomes a tests string, so we can be sure that the return value of this method is the final output.

Next, we implement a simple string beyond the intercepted pipeline:

Transform (value: string,... args: number []): string {let defaultLength = 10; if ((args [0] | | defaultLength) < value.length) {return value.substr (0heroin ARGs [0] | | defaultLength) + '...'} else {return value}. {{'sssssssssssssssssssssssssssssss' | tests: 30}}

This makes it possible to intercept the string and add it at the end.

This is the end of the content of "Pipeline instance Analysis in Angular". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.