Pipes In Angular

Pipes In Angular 6


Pipe Transform's the data before displayed to Browser.

There are two Type's of Pipe's In Angular
 a. Predefined - Pipe's 
 b. Custom - Pipe's
Each and every pipe we can use by '|' symbol i.e.. 
  {{Variable | pipeName}}
We can pass option value's to a pipe using ':' symbol i.e.. 
  {{Variable | pipeName : option1 : option2 }}

1. Predefined - Pipe's 

Predefined pipe's are the pipes given by angular Team. Few of them are as follow's 
 a. Date Pipe
 b. upperCase Pipe
 c. lowerCase Pipe
 d. titleCase Pipe 
 e. currency Pipe

Program's With Predefined Pipe's 







Comments

Post a Comment

Popular posts from this blog

MVC or MVVC Pattern In Angular

Image
MVC or MVVC Pattern In Angular MVC - Model - View - Controller 1. In Angular every component will follow MVC pattern. 2. MVC indicate's - Model - View - Controller. 3. Model is the raw data or the data from remote. 4. View indicate's look and feel. 5. Controller acts as the mediator between Model and View. 7. In angular view can be achieved by HTML and CSS , Model indicates the object Controller indicates data transmission between View and Model. 8. In Angular each component will have all Model, View, Controller. So Angular is called Component based MVC. 9. In Angular it follow's two way binding i.e.. Data transmission between Model - view - view - controller hence it is also called as MVVC. 10. So angular can be called as MVC or MVVC. Files Indicating MVC in Angular. Model - component.model.ts View - component.html , component.css Controller - component.ts, component.service.ts Note There is still a dilama and debet weather angular i...
Read more

Angular 6 Template Driven Form Validations

Angular 6 Template Driven Form Validations 1. Create a form component. 2. Create an Angular Form  3. Validating Email and Password 1. Create Form Component Command : ng generate component templateForms --spec=false         The above command generate's following file's  1. template-forms.component.html 2. template-forms.component.ts 3. template-forms.component.css  Create one more file in the same folder as model file  4. template-forms.model.ts Now in the model file do the following  export class LoginForm { emailVal: string; passwordVal: string; } Description 1. In this model we are using 2 form input's which we need to send as a request 2. In model we define name of model and type of model if we don't have default Values. In template-forms. component.ts do the following <form #loginForm="ngForm" (ngSubmit)="login(loginForm)"> Email <br> ...
Read more

7. Class Binding

Image
Class Binding When we want to bind CSS classes either from typescript or class OR based on conditionals we can go with the concept of Class Binding. Class binding in angular can be defined in as follows : <element [ngClass]="condition or ternary or multiple CSS classes"> </element> ng class can be used in many different ways in angular which are as follows: 1. ngClass with ternary operator:  <element [ngClass]="condition ? 'class1' : 'class2'"> </element> from above when condition is true 'class1' will be applied to the element else 'class2' will be applied. 2. ngClass with condition in object format: <element [ngClass]="{'className': condtion}"> </element> When we have only one condition and one class to be applied we can use above syntax. 3. ngClass with multiple conditions in object format <element [ngClass]="{'class1': condition1, 'class...
Read more