Coder Collection

What’s New In Angular 8: Feature 1.     Angular 8 was Released on April/May 2019. Feature 2.     Next-gen Renderer for Angular Framework Shipment of pre-compiled code  Compilation without the need of Metadata.json Meta programming. Feature 3.     Added Web Workers. Feature 4.     Added Lazy Loading. Feature 5.     Improvement in ng-upgrade. Feature 6.     Added Support for Node 10. Feature 7.     Improvements on CLI workflow. Feature 8.     Upgrading Angular Material. Feature 9.     Added TypeScript 3.4 support. Feature 10. Added Differential Modern JavaScript Loading. Feature 11. Improved Web Worker Bundling. Feature 12. Added a Navigation Type Available during Navigation in the Router. Feature 13. Added pathParams Or QueryParamsChange mode for runGuards And Resolvers in the Router. Feature 14. Allow passing ...

What’s New In Angular 9: Feature 1.      Angular 9 Released in October/November 2019.! Feature  2.      Now Its support Added undecorated classes migration schematic in the core.! Feature  3.      Support The formControlName also accepts a number in the form.! ! Feature  4.      Now  Support   allow selector-less directives as base classes in View Engine in the compiler.! Feature  5.      Added support selector-less directive as base classes in Ivy and also make the Ivy compiler the default for ngc.! Feature  6.     Support  to   Convert all ngtsc diagnostics to ts.Diagnostics.! Feature  7.     It also  Added bazel - support ts_library targets as entry-points for ng_package.! Feature  8.     It also  Added core - add dynamic queries schematic.! Feature  9.  ...

What is One-way Data Binding? As you know  data binding will bind the data from the component to the view (DOM) or from view to the component. This data binding is work unidirectional and you can only bind the data from component to the view or from view to the component. There are many techniques of data binding which use one-way data binding to bind data from component to view. Below are some of the techniques, which uses one-way data binding. Interpolation Binding: Interpolation refers to binding expressions into marked up language. Property Binding:This  Property binding is used to set a property of a view element. The binding sets the property to the value of a template expression. Attribute Binding: This Attribute binding is used to set a attribute property of a view element. Class Binding: This Class binding is used to set a class property of a view element. Style Binding:This  Style binding is used to set a style of a view element. Let's cons...

Add the  AppRoutingModule In Angular, the best practice is to load and configure the router in a separate, top-level module that is dedicated to routing and imported by the root  AppModule . By convention, the module class name is  AppRoutingModule  and it belongs in the  app-routing.module.ts  in the  src/app  folder. Use the CLI to generate it. ng generate module app - routing -- flat -- module = app import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; @NgModule({ imports: [ CommonModule ], declarations: [] }) export class AppRoutingModule { } import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HeroesComponent } from './heroes/heroes.component'; const routes: Routes = [ { path: 'heroes', component: HeroesComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule ...

The  NgStyle  directive lets you set a given  DOM  elements style properties. One way to set styles is by using the  NgStyle  directive and assigning it an  object literal , like so: HTML COPY < div [ngStyle] = " { ' background-color ' : ' green ' } " > </ < div > This sets the background color of the  div  to green

ngClass Using String Syntax This is the simplest way to use ngClass. You can just add an Angular variable to ng-class  and that is the class that will be used for that elements for example - <div ng-class="textType">Look at me </d iv> Then in component CSS write CSS for textType class Like as .textType{ color:red; }

Let’s take an example and understand more about Data Display. In our example, we will look at displaying the values of the various properties in our class in an HTML page. Step 1  − Change the code of the app.component.ts file to the following. import { Component } from '@angular/core' ; @Component ({ selector : 'my-app' , templateUrl : 'app/app.component.html' }) export class AppComponent { TutorialName : string = 'Angular JS2' ; appList : string [] = [ "Binding" , "Display" , "Services" ]; } Following points need to be noted about the above code. We are defining an array called appList which of the type string. We are defining 3 string elements as part of the array which is Binding, Display, and Services. We have also defined a property called TutorialName which has a value of Angular 2. Step 2  − Make the following changes to the app/app.component.html file w...