Creating Preloader screen with CSS is pretty easy due to added animation to them. CSS also unlock lots of designing opportunity by providing lot of psuedo-elements like :before, :after etc. Steps required to create css preloader A web page ( H ypertext M arkup L anguage page) C ascading S tyle S heet (CSS) Additionally, JavaScript can be used for hiding the preloading screen after page completes its loading. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple Circle loading</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div class="overlay"> <div class="loading"></div> </div> </body> </html> CSS body{ margin: 0; padding: 0; font-family: Arial; } .overlay{ background: #ffffff; height: 100vh; width: 100%; top: 0;
Pipe is a building block in Angular. We use pipe to format data in Angular. We have got some build-in pipes like Uppercase, Lowercase, Decimal, Currency, Percent. We will learn How to create custom Pipe in Angular in this post. Before going to create custom pipe let’s get some example of build-in pipes using interpolation. Uppercase: {{ “this is text” | uppercase }} => THIS IS TEXT Lowercase: {{ “THIS IS TEXT” | lowercase }} => this is text Decimal: {{ 4.0546 | number:’1.2-2′ }} => 4.06 Currency: {{ 160.26 | currency }} => USD160.26 Date: {{ new Date(2019, 9, 5) | date:’shortDate’ }} => 10/5/2019 Custom pipe Now lets learn how to create custom pipe in Angular. We will be creating a summary pipe, which will summarize a long text content to some limited character provided as option or 50 character to default. Create a new file using standard naming convention. for example: summary.pipe.ts Import Pipe and PipeTransform from @angular/core. Export