An article to talk about pipelines (PIPE) in Angular
What is a pipeline (PIPE)? This article will introduce you to the pipeline (PIPE) in Angular, and talk about the methods of built-in pipelines and custom pipelines. I hope it will be helpful to you!
What is a pipeline (PIPE)
PIPE, translated as pipeline. Angular Pipes are a way of writing display value transformations that can be declared in HTML components. Angular pipelines were previously known as filters in AngularJS and since Angular 2 are known as pipes. Pipes take data as input and transform it into the desired output. [Related tutorial recommendations: angular tutorial, Programming Teaching]
Simply put, Angular Pipes can help us convert our input, including strings , integers, dates, etc., are converted into specific formats according to our needs and displayed in the browser. Through interpolation expressions, we can define a pipeline and use it in specific situations. Angular provides us with many different types of pipelines. Of course, you can even customize pipelines.
To give a relatively simple example, date formats are diverse. You can convert between various formats through pipelines, such as converting seconds into hours, minutes and seconds.
Built-in pipes
As mentioned above, Angular provides us with many different types of pipes. They are all built-in pipes of Angular. As for what the built-in pipes are and how to use them, let’s demonstrate them through code below.
Time Pipelinedate
#We create a new Angular project and add a new Date()# to the page ##:
<div>{{data}}</div>
...
export class AppComponent {
title = 'my-app';
data = new Date()
}
| symbol after the variable, and declare the pipeline
<div>{{data | date:'yyyy-MM-dd'}}</div>date pipe. For details about the specific parameters of the pipe, please see Check out the official documentation, which introduces all the time formats it provides for you to convert.
Angular - DatePipehttps://angular.cn/api/common/DatePipe#descriptionAfter we set up the pipeline, browse The time in the processor has changed
Other pipelines
Angular also provides other pipelines, such as changing the name of the currency Format of pipe (currency):
Angular - CurrencyPipehttps://angular.cn/api/common/CurrencyPipeThere is also a pipe that converts strings to uppercase (uppercase):
<div>{{'ASDasd' | uppercase }}</div>
Custom pipehttps: //angular.cn/api/common/UpperCasePipe
We introduced several built-in pipes above. First, if the built-in pipelines cannot meet our development needs, then Angular also provides us with custom pipelines. You can define a pipeline yourself and define how to transform the input.
We can quickly generate a pipeline through the command line provided by Angular:
ng g p pipes/pipe-name
Here I created a pipeline named test
After you run the above command, a pipes folder will be created for you under src, which contains your custom pipes
Then Angular will automatically introduce these pipes for you in the app, so that you can use custom pipes everywhere in the world.
Then you see the pipe under the pipes folder. The pipe is essentially a class. Here, a decorator is used to give it a name of tests.
在这个类里面我们需要去实现 PipeTransfrom 这个接口，也就是需要有 transform 这个方法，在这个方法中，第一个参数就是要放入管道的输入，第二个数据是我们向管道传递的参数，管道中把它放入了一个数组里面。
这个 transform 方法返回什么，我们的页面拿到的就是什么数据，我们先来做一个测试
transform(value: unknown, ...args: unknown[]): unknown {
return 'tests';
}
...
<div>{{'ASDasd' | tests }}</div>返回一个固定的字符串，并且在页面中去使用它
可以看到返回的结果变成了 tests 字符串，这样我们就可以确定这个方法的返回值就是最终的输出。
接下来我们实现一个简单的字符串超出截取的管道：
transform(value: string, ...args: number[]): string {
let defaultLength = 10;
if((args[0] || defaultLength )< value.length){
return value.substr(0,args[0] || defaultLength)+'...'
}else{
return value
}
}
...
<div>{{'sssssssssssssssssssssssssssssss' | tests: 30 }}</div>这样就能够对字符串进行一个截取并且在尾部添加 ...
总结
本文我们学习了 Angular 中管道的使用，简单的来说管道就是一个方法，可以将你的输入转化为特定的你需要的输出格式，Angular提供给了我们许多的内置管道，当内置管道不满足你的要求的时候，你还可以通过自定义管道来更加灵活的自定义输出格式
更多编程相关知识，请访问：编程视频！！
The above is the detailed content of An article to talk about pipelines (PIPE) in Angular. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1667
14
1426
52
1328
25
1273
29
1255
24
How to install Angular on Ubuntu 24.04
Mar 23, 2024 pm 12:20 PM
Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub
An article exploring server-side rendering (SSR) in Angular
Dec 27, 2022 pm 07:24 PM
Do you know Angular Universal? It can help the website provide better SEO support!
A brief analysis of how to use monaco-editor in angular
Oct 17, 2022 pm 08:04 PM
How to use monaco-editor in angular? The following article records the use of monaco-editor in angular that was used in a recent business. I hope it will be helpful to everyone!
How to use PHP and Angular for front-end development
May 11, 2023 pm 04:04 PM
With the rapid development of the Internet, front-end development technology is also constantly improving and iterating. PHP and Angular are two technologies widely used in front-end development. PHP is a server-side scripting language that can handle tasks such as processing forms, generating dynamic pages, and managing access permissions. Angular is a JavaScript framework that can be used to develop single-page applications and build componentized web applications. This article will introduce how to use PHP and Angular for front-end development, and how to combine them
How to use pipes to read and write files in Golang?
Jun 04, 2024 am 10:22 AM
File reading and writing through pipes: Create a pipe to read data from the file and pass it through the pipe Receive the data from the pipe and process it Write the processed data to the file Use goroutines to perform these operations concurrently to improve performance
Token-based authentication with Angular and Node
Sep 01, 2023 pm 02:01 PM
Authentication is one of the most important parts of any web application. This tutorial discusses token-based authentication systems and how they differ from traditional login systems. By the end of this tutorial, you will see a fully working demo written in Angular and Node.js. Traditional Authentication Systems Before moving on to token-based authentication systems, let’s take a look at traditional authentication systems. The user provides their username and password in the login form and clicks Login. After making the request, authenticate the user on the backend by querying the database. If the request is valid, a session is created using the user information obtained from the database, and the session information is returned in the response header so that the session ID is stored in the browser. Provides access to applications subject to
A brief analysis of independent components in Angular and see how to use them
Jun 23, 2022 pm 03:49 PM
This article will take you through the independent components in Angular, how to create an independent component in Angular, and how to import existing modules into the independent component. I hope it will be helpful to you!
What should I do if the project is too big? How to split Angular projects reasonably?
Jul 26, 2022 pm 07:18 PM
The Angular project is too large, how to split it reasonably? The following article will introduce to you how to reasonably split Angular projects. I hope it will be helpful to you!
