Be A Programmer In Angular 2+

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 

 Routing from One to Other Component 1. Routing from HTML DOM Element's (View) 1. routerLink is an angular directive which take's route of other component as a value. 2. This routerLink can be used either on button or anchor tag. <a routerLink ="/ANY_PATH" >....</a> OR <a [ routerLink ]="['PATH']">...</a> From Previous section of this blog see all the route's and example of route's we have created.         ( https://angularprogrammer.blogspot.com/2018/10/advanced-routing-in-angular-6.html )  In template-forms.html <a routerLink ="/list">Navigate to list</a> 1. When user click's on the above link it navigate's the user to list component and renders the list component. 2. Routing from Controller 1. Angular has provided a service called Router Service present in Router Module. 2. import Router Service in your component as follow's import ...

Advanced Routing in Angular 1. Creating Angular project with Routing ng new <PROJECT_NAME> --routing --spec=false 1. The Above Command create's a project with routing file. 2. The above Command create's default file's as below: a. app.component.html b. app.component.ts c. app.component.css d. app.component.module.ts e. app.routing.module.ts 2. Creating 3 component's   ng generate component list --spec=false ng generate component template-forms --spec=false ng g c pageNotFound --spec=false (short hand command) Above command's create 3 components with following file's <COMPONENT_NAME>.component.html <COMPONENT_NAME>.component.ts <COMPONENT_NAME>.component.css 3. Creating 3 Module's for each component ng generate module list --routing --spec=false ng generate module template-forms --routing --spec=false ng g m pageNotFound --routing --spec=false Above command's create 2 more ...

Routing in Angular 1. Create routing in app module. 2. Command's to create a routing file new project or existing project. 3. Creating 3 Components. 4. Creating routes for 3 component's 5. How to route from one page to other page. Create routing in app module 1. Create an angular project with the following command Command: ng new routing-sample 2. The above command creates angular project with app component as default. 3. Now generate three component's as below 1. ng generate component template-forms --spec=false 2. ng generate component list --spec=false 3. ng generate component pageNotFound --spec=false 4. The above 3 generated component's should be linked and imported to app.module.ts 5. In app.module.ts import RouterModule and Routes type from @angular/router; import {Routes, RouterModule} from '@angular/router'; 6. Create an array of path's and pass the value to RouterModule.forRoot() [Only when we have Parent...

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> ...