Be A Programmer In Angular 2+

Interpolation in Angular Introduction 1. Interpolation is one type of binding where we can bind the data for display. 2. We can perform mathematical operations, conditional operations e.c.t. 3. Interpolation always converts the result to string type before display or before assigned. 4. Interpolation can also be used for element properties whose return type or expected type is string type. examples : type, placeholder e.c.t. 5. Interpolation can't be used for element properties whose return type or expected type is other than string. examples: required, readonly e.c.t 6. If we are trying to use interpolation for the element properties whose return type or expected type is other than string , then we wont get any errors but result's with the default value of that particular property. Examples 1. app.component.html 2. app.component.css 3. app.component.ts In app.component.html  <h1>Ways of using Interpolation</h1> ...

Data Binding in Angular 1. What is Data binding ? 1. Binding the model data between view and controller is called as Data Binding 2. In Angular Data Binding can be achieved in two ways: a. One Way Data Binding. b. Two Way Data Binding. One Way Data Binding  1. Binding the data from controller to view or view to controller is called one way data binding. 2. One Way data binding is again classified into two ways a. Controller to View. b. View To controller. Controller to view Data Binding  1. Binding the data from controller to view is called controller to view data binding. 2. Controller to view binding is again classified into 5 types a. Interpolation. b. Property Binding. c. Attribute binding. d. Style Binding. e. Class Binding.  V iew  to  Controller  Data Binding  1. Binding the data from view to controller is called View to controller Data binding. 2. Controller to view binding is again classified ...

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

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