Category: Angular

Angular Best Practices
Posted on: January 28, 2022 Posted by: rahulgite Comments: 329

Angular Best Practices

Angular Best Practices Use ES6 features like let, const, arrow function Use trackby along with ngFor Use lazy loading Use index.ts file for shorter import use datatype, Avoid ‘any’ type Create own Data type using Interface Avoid memory leak by unsubscribing the observable also we can use Rxjs operator  like takeUntil() Should use Async pipe Avoid logics in the template Use Environment variable for multiple server or API call configurations Use module structure Focus on small and reusable components Declaring a variable with ‘const’ if the value is not changing Use smart and dumb Components strategies Using…

Loading

READ MORE
angular and primeng
Posted on: November 15, 2021 Posted by: rahulgite Comments: 11

Pagination in Angular Material and Prime NG

Pagination in Angular Material and Prime NG against 20k records Prime NG Angular Material 34 ms Loading 1650 ms Scripting 57 ms Rendering 2 ms Painting 320 ms System 13 ms Loading 168883 ms Scripting 103 ms Rendering 7 ms Painting 446 ms System Prime NG works very well with pagination, no matter the number of records available for pagination. Angular Material takes the same amount of time as it would take for rendering 20k records. So page loading time increases as the number of records available for pagination. Best Not good. Need to check more if this is…

Loading

READ MORE
angular and primeng
Posted on: November 11, 2021 Posted by: rahulgite Comments: 17

PrimeNG vs Angular Material

More Angular Notes Angular Docs PrimeNG Vs Angular Material  PrimeNG Angular Material Reference Introduction PrimeNG is a UI component library that is created by Primark Informatics. Primark Informatics is a vendor with a lot of expertise and experience in developing open-source UI solutions. It is like a sibling to the PrimeFaces UI component library. The Widgets contained within the library are open-source, therefore are free to use under the MIT license. This library not only provides multiple free themes, but also a plethora of premium themes available with a lot more UI variations available for a…

Loading

READ MORE
Angular Validations
Posted on: November 9, 2021 Posted by: rahulgite Comments: 5

Form Validations in Angular

  ng-valid/ ng-invalid: This indicates whether form validations are passed. ng-touched/ ng-untouched: This indicates whether the form element is selected by the user or tabbed. ng-pristine/ ng-dirty: This indicates whether data in the element is modified. TS File Form validation Add a required attribute to HTML elements. Custom validation Create Boolean variables to store valid/ invalid status. Create valid functions which check the data validations. import { Route } from ‘@angular/compiler/src/core’; import { Component, Input, OnInit } from ‘@angular/core’; import { Router } from ‘@angular/router’; import { DataService } from ‘src/app/data.service’; import { User }…

Loading

READ MORE
mock
Posted on: November 3, 2021 Posted by: rahulgite Comments: 11

Mock Implementation for DataServices in Angular

Data Service: Use Observable as a return type to get methods from rxjs, and create some mock data for models import { Injectable } from ‘@angular/core’; import { of } from ‘rxjs’; import { Observable } from ‘rxjs/internal/Observable’; import { Layout, LayoutCapacity, Rooms } from ‘./models/Room’; import { User } from ‘./models/Users’; @Injectable({ providedIn: ‘root’ }) export class DataService { rooms : Array<Rooms>=[]; users: Array<User>=[]; getRooms(): Observable<Array<Rooms>>{ return of(this.rooms); } getUsers(): Observable<Array<User>>{ return of(this.users); } constructor() { const room=new Rooms(); room.id=1; room.name=”Rahul”; room.location=”1st floor”; const layoutCap1=new LayoutCapacity(); layoutCap1.capacity=20; layoutCap1.layout=Layout.THEATER; const layoutCap2=new LayoutCapacity(); layoutCap2.capacity=50; layoutCap2.layout=Layout.BOARD; room.capacities.push(layoutCap1);…

Loading

READ MORE
Angular Routes
Posted on: November 3, 2021 Posted by: rahulgite Comments: 12

ActivatedRoute in Angular

ActivatedRoute helps us to get parameters from URL and then we can show or process the data accordingly. Add ActivatedRoute in constructor arguments. Use this.route.queryParams to access parameters as shows import { Component, OnInit } from ‘@angular/core’; import { ActivatedRoute, Router } from ‘@angular/router’; import { DataService } from ‘src/app/data.service’; import { Rooms } from ‘src/app/models/Room’; @Component({ selector: ‘app-rooms’, templateUrl: ‘./rooms.component.html’, styleUrls: [‘./rooms.component.css’] }) export class RoomsComponent implements OnInit { rooms:Array<Rooms>=[]; selectedRoom!:Rooms; constructor(private data:DataService, private route:ActivatedRoute, private nav:Router) { } ngOnInit(): void { this.rooms=this.data.rooms this.route.queryParams.subscribe(params => { const id=params[‘id’]; if(id){ this.selectedRoom=this.rooms.find(room => room.id===+id)!; } }); }…

Loading

READ MORE
Nullish Coalescing
Posted on: November 3, 2021 Posted by: rahulgite Comments: 12

Nullish Coalescing in angular

Nullish Coalescing: a logical operator that returns the value on the RIGHT-hand side when the left-hand side is null or undefined. <h1> {{title ?? “Title not available”}} </h1> Optional Chaining + Nullish Coalescing Consider a Person has address attributes: street, city, pin incase street is undefined or null we need to show city and then pin. {{person?.street?.city?.pin}} More Angular Notes Angular

Loading

READ MORE
Angular Routes
Posted on: November 3, 2021 Posted by: rahulgite Comments: 12

Angular Routing

Angular Routing Create a component if you need to set routing for the new component. Go to /app.modules.ts file. create new variable routes above @NgModule decorator as below const routes=[ { path:”admin/users”, component:UsersComponent } ] now scroll down and add an entry of RoutersModule in the import imports: [ BrowserModule, RouterModule.forRoot(routes) ] Even though you have added routes, angular will still load index.html. To show component according to URL we need to include <router-outlet> in /app.component.html <div clas=”container”> <app-menu></app-menu> <router-outlet></router-outlet> </div>   Now we are all set. hit the path/route you configured. In component, HTML…

Loading

READ MORE
Angular Debugging
Posted on: November 2, 2021 Posted by: rahulgite Comments: 6

Angular Debugging in Visual Studio Code

Steps to start debugging angular application through Visual Studio Code Go to > Run > Add Configuration 2. Select Chrome from popup, it will create a file like below. Just change the port number to 4200 or any other port where your application is configured. 3. Create a breakpoint in code by clicking just before line no. or select line press f9 4. Go to > Run > Start debugging 5. It will create a new chrome window attached to VS code. Also VS Code will show small panel with debugging options  

Loading

READ MORE
Dependency Injection
Posted on: November 2, 2021 Posted by: rahulgite Comments: 14

Angular Services and Dependency Injections

  Book has classes but it will have multiple instances in different components. Now Here come services, they will share a single instance to all components Create Service ng generate service data OR ng g s data Angular CLI does not modify any files when we create a service unlike while generating components it adds an entry in app.modules.ts   Dependency Injection Create Service Create Class Book export class Book{ title!: string; author!: string; price!: number; constructor(){ } } 3. Add Book class in service and add data in an array of books import {…

Loading

READ MORE