DEV Community: GaurangDhorda

Angular

GaurangDhorda — Fri, 02 May 2025 08:45:46 +0000

Angular Template form control in separate reusable component

GaurangDhorda — Fri, 31 Dec 2021 10:24:48 +0000

This article is all about angular Template driven forms in angular. But When working with angular forms we have two approach to select
1. Template Driven Form
2. Reactive Forms

You can support me. Please click below image. Thank You.

So, Template driven forms are very useful when forms structure is pretty small and do not need more dynamic form creation with model. There are some terms of angular template forms..

ngForm
name property for control.
ngModel
FormsModule

FormsModule

We need to import FormsModule inside app.module.ts file of angular. By importing this module we can use and can enable feature of it inside our component.



import { FormsModule } from '@angular/forms';
@NgModule({
  imports:      [ FormsModule ],
})
export class AppModule{}

ngForm

By looking into official angular documentation we can find what is ngForm.

The NgForm directive creates a top-level FormGroup instance and binds it to a <form> element to track aggregated form value and validation status. As soon as you import FormsModule, this directive becomes active by default on all <form> tags.



< form #heroForm="ngForm" >
    <!-- All forms will be generated within this area -->
< /form >

ngModel

Angular NgModel is an inbuilt directive that creates a FormControl instance from the domain model and binds it to a form control element. The ngmodel directive binds the value of HTML controls (input, select, textarea) to application data.



< input type="text" #firstName="ngModel">

<!-- So whatever we write inside input box, angular bind it inside fristName model of component.

name

It is necessary to bind name property with input element in order to differentiate control model with other input element inside ngForm. So what ever we give name it will act as ngForm Model.



< input type="text" #firstName="ngModel" [(ngModel)]="nameModel" name="firstName" >

So by visiting above terms now lets see complete template of template driven forms. If we want input to be required field of form then we can use required attribute of forms for input element.



<form #userRegistrationForm="ngForm">
    < input required type="text" [(ngModel)]="userForm.firstName" name="firstName" >
</form>

So when we submit form then we have form model like below



{ firstName : '' }

Up to now its refresher of angular forms but in this article I want to make child component of input to reuse inside our application inside multiple times with many ngForm Groups. To do this first lets see about main template of component.



<form #heroForm="ngForm" class="container" (ngSubmit)="onSubmitValidator(heroForm.value)">
    <div id="parent" *ngFor="let i of [0,1,2]" >
       <app-child [id]="i+1" [name]="i+1" ></app-child>
    </div>
    <hr>
    {{heroForm.value | json}}
    <hr>
    <div>
  <app-button-submit></app-button-submit>
</div>
</form>

see above app-child component is our custom component and is placed inside ngFor loop. Now lets see whats inside app-child component.

app-child component.

First step we need to provide dependency to app-child viewProviders array.

viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]

This will make sure that ControlContainer is provided by angular then we need to use existing ngForm. First ControlContainer is basic class of form used for providing parent form to child, and we use useExisting of ngForm, so we tell angular that use only current parent formGroup with this component.



<div class="form-group">
    <label [for]="Name">Name</label>
    <input required #templatInputRef="ngModel" type="text" class="form-control"
              [id]="inputId" [name]="inputName"  [(ngModel)]="vname" (keyup)="onChange(templatInputRef)">
              {{vname}}
    <div class="alert alert-danger" [hidden]="templatInputRef.valid || templatInputRef.pristine">
        Name is required
    </div>
</div>
<hr>

So this way we provide relation between parent ngForm to child component. So each child component has their own name and model binds with. so when parent inside ngFor we create multiple elements then each element treated ad separate form element.

Now, This way we will also build submit component reusable too!



@Component({
  selector: 'app-button-submit',
  templateUrl: './button-submit.component.html',
  styleUrls: ['./button-submit.component.css'],
  providers : [{provide : ControlContainer, useExisting : NgForm}]
})
export class ButtonSubmitComponent  {
  constructor(private control : NgForm) { }
}



<button  type="submit" class="btn btn-success"
         [disabled]="!control.form.valid">Submit
</button>

In above we inject ngForm directly to submit component, so what ever parent ngForm is now inside our child submit component and acts as separate component too. You can find demo in below..

You can support me

Generate breadcrums for your Angular-Router and set page title dynamically.

GaurangDhorda — Thu, 10 Jun 2021 13:50:42 +0000

In this example I am going to explain you that You can use library to generate breadcrumbs, and also set each page title dynamically.

first you need to install this library to your angular project.

npm install set-title-with-breadcrumbs

This will install library called set-title-with-breadcrumbs, this library is used to generate breadcrumbs component and also you can set page title using angular router. After installing this library..

Go to your app.module.ts file and add below code

import { SetTitleWithBreadcrumbsModule} from 'set-title-with-breadcrumbs';
    @NgModule({
        imports : [SetTitleWithBreadcrumbsModule]
    })

in side your app-routing.module.ts file you have to add new data:{} object with breadcrumbs and title object property.

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: { title: 'Home Page', breadcrums: 'Home' },
    children: [
      {
        path: 'records',
        component: RecordsComponent,
        data: { title: 'Find Records Page', breadcrums: 'Find-Records' },
        children: [
          {
            path: 'child',
            component: ChildComponent,
            data: { title: 'Child Record Page', breadcrums: 'Child-Record' }
          }
        ]
      }
    ]
  }
]

as you can see above, each router-path has data object with two property - breadcrumbs and title.

Now inside your app.component.html file you need to add component of library.

<lib-set-title-with-breadcrumbs></lib-set-title-with-breadcrumbs>
<router-outlet></router-outlet>

You can support me here.

Connect with me by email : grdtechlab@gmail.com

Working demo in this stackblitz link

How to use DI Token to provide different services instance at runtime for common interface inside angular web app

GaurangDhorda — Tue, 30 Mar 2021 12:48:37 +0000

In this article we will understand use of DI Injection-Token. and We will use This DI token for common tasks and provide services instance at runtime.

You can support me

There are many times comes when we will design angular component, some time component is calling same methods but provide different result for each separate component. For example, Inside our angular application we have two components..

ArtsDepartmentEployeeLists
ScienceDepartmentEmployeeLists

Above, Both component displays lists of employees, and difference is first component displys arts employee while second component displays Science Employee list. Both Component have common interface api to display only list of employee and nothing else.

In this situation, First use-case of app is.. we will create one Container component and let container component decides what to render to user. whether it would be arts or science employee list.

Second Use-Case is let admin decides what to render inside whether it would be arts or science employee list and admin decides at runtime of application and switch between lists of employee. This is just a example to decide when to use this method.

To use Injection-Token based service providers inside angular application,

we will first have to figure out common interface of component.
we do not know when at runtime what will user picks.

Now, we have understood, some of the use-case for this mechanism, now we learn how this method is useful in angular.

InjectionToken(),

  Angular provide us way to extend Dependency Injection mechanism as per our requirement, or we will provide any kind to object or class or factories using InjectionToken inside component, and component injector looks for providers of Token and provide us same instance of InjectionToken. We first Have to create InjectionToken inside our application like this...

employee-type-interface.ts



export type IEmployeeType = "art" | "science";

employee-interface.ts



import { IEmployeeType } from "../Tokens/employee-type-interface";

export interface IEmployeeList {
  employeeType: IEmployeeType;
  list();
}

In above IEmployeeList interface, we declared two members..

employeeType : used to pass type of employee like art or science.
list() : is method where api call for both component takes place.

Both component needs to have implements this IEmployeeList interface.

Now, we create InjectionToken..

list-token.ts



import { InjectionToken } from "@angular/core";
import { IEmployeeList } from "../Tokens/employee-interface";

export const EMPLOYEE_LIST: InjectionToken<IEmployeeList> = new InjectionToken<
  IEmployeeList
>("Token for Employee list");

Above, we created EMPLOYEE_LIST injection token, this injection token has type of IEmployeeList and this token is for Employee list.

Before we provide injection token to app-module, first we will create two separate service for both art and science employee, and this both service implements our IEmployeeList interface and provide implementations.

art-employee-list.ts



import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { IEmployeeList } from "../Tokens/employee-interface";
import { IEmployeeType } from "../Tokens/employee-type-interface";

@Injectable()
export class ArtEmployeeService implements IEmployeeList {
  employeeType: IEmployeeType = "art";
  employeeData$ = of([
      { id: 1, employeeType: "art", employeeName: "Avenger" }
  ]);
  constructor(private http: HttpClient) {}
  list() {
    console.log("art-employee list is calling...");
  }
}

science-employee-list.ts



import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { IEmployeeList } from "../Tokens/employee-interface";
import { IEmployeeType } from "../Tokens/employee-type-interface";

@Injectable()
export class ScienceEmployeeService implements IEmployeeList {
  employeeType: IEmployeeType = "science";
   employeeData$ = of([
     { id: 1, employeeType: "science", employeeName: "Harman" }
   ]);
  constructor(private http: HttpClient) {}
  list() {
    console.log("science-employee list is calling...");
  }
}

Now we need to provide this token inside our app.module.ts

app.module.ts



@NgModule({
  imports: [BrowserModule, FormsModule, HttpClientModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers: [
    { provide: EMPLOYEE_LIST, useClass: ArtEmployeeService, multi: true },
    { provide: EMPLOYEE_LIST, useClass: ScienceEmployeeService, multi: true }
  ]
})
export class AppModule {}

In Above, app.module.ts file we provide our EMPLOYEE_LIST token inside providers array, with different implementation using useClass modifiers and we will tell angular that this token have multiple implementation using multi:true.

Now, all setups are ready to use inside our application, To implement this feature lets create one container-component..

container.component.ts



export class ContainerComponent implements OnInit {
  employeeList$;
  constructor(@Inject(EMPLOYEE_LIST) private employeeList: IEmployeeList[]) {}

  ngOnInit() {}
  onEmployeeList(typeOfEmployee: IEmployeeType) {
    const empList = this.employeeList.find(
      employeeType => employeeType.employeeType === typeOfEmployee
    );
    this.employeeList$ = empList.list();
  }
}

First of all, inside constructor of ContainerComponent we inject our EMPLOYEE_LIST token, and type of this token is Array of IEmployeeList.

This container component has one method onEmployeeList() which decides which list of employee data to load inside component at runtime. lets we call this method from template of container component..

container.component.html



<button (click)="onEmployeeList('art')">Load art-employee data </button>
<hr />
<button (click)="onEmployeeList('science')"> Load science-employee </button>
<hr />
<ng-container *ngIf="employeeList$ | async |json as employeeList">
  {{employeeList}}
</ng-container>

Inside template of html onClick of two button, we pass parameter to onEmployeeList() method, and then this method decides which injector of service to return back at runtime.

First this method finds class of employee list using fine() method, and by this instance we will call list() method respectivly. This list() method will return data based on button click whether its art or science...

At runtime we return instance of service..

There are many benefits of this pattern,

Uniformity in pattern.. when we need another type of employee list to display then we just create own service and provide this service using our custome injection-token with useClass,
we will provide data using angular Dependency Injection, so that our application code is well structured and maintable.
use this pattern when you want to provide instance of service at run time.

You can support me

Reusable Dialog component using Vue3 composition api

GaurangDhorda — Fri, 19 Mar 2021 16:51:18 +0000

Creating reusable dialog component using vue3 composition api. Open and Close multiple dialog stack from within.

You can support me

What is composition api.

Composition api is vue3 feature, where we can simplify our component logic by moving to another file and used from multiple component. Meaning If you are aware of React Contenxt api, same we will maintain context of app and share common context between multiple components and manipulate data from only single source.

I am assuming You are using Vue/Cli and already created your app using Vue/Cli with vue3 setup.

first of all lets create our main part of dialog composition logic. Create new file under Api/toggleModel.js and then add below code under this file.



import { reactive, readonly } from "vue";

const modal = reactive({
  role: []
});

export default function useToggleModal() {
  const toggleModel = (role = "") => {
    modal.role.pop();
  };

  const openModal = (role = "") => {
    modal.role.push({ type: role, isOpen: true });
  };

  const hasRole = (role = "") => {
    if (role === "") return false;
    const findRole = modal.role.find(currentRole =>
      currentRole.type === "" ? null : currentRole.type === role
    );
    if (findRole === undefined) return false;

    return findRole.type === role && findRole.isOpen === true ? true : false;
  };

  return {
    state: readonly(modal),
    toggleModel,
    openModal,
    hasRole
  };
}

[Step : 1] first we import bellow composition api function.

import { reactive, readonly } from "vue";

[Step : 2] then we create our gloabl state modal and makes state reactive(), so that each time we change value of state it will update state to component too, meaning component will get new state whenever this global state object is changed.

const modal = reactive({ role: [] });

[Step : 3], in step 3 we created one function useToggleModal() and inside all logic of modal state handling lives in. lets understand it step by step.

inside, useToggleModal() function we declared three inner function which are toggleModel, hasRole, openModal, as name suggests you can get hows this three functions working all togather.

hasRole(),
as name suggests, hasRole() function is used to check wether given dialog is open or not, based on this function return value, inside our dom we show dialog component using v-if. All user needs to have is pass dialog name to this hasRole() function, and this function returns true, if given role name is found open, or returns fasle if given role name is not found. here we check global state modal.role is available or not.

openModal(),
as name suggets, openModal() function is requires when ever user wants to open dialog onButton click event from any component, inside this function user has to pass one dialog role name, and same role is checked by hasRole() function, if Both role name found same dialog opens, otherwise dialog is in close state.

So, inside openModal() we pass role state, whatever user wants to pass in, the same role name is also passed on inside hasRole() too!.

toggalModel(),
as name suggets, currently opened dialog is closed when ever use clicks on right side close button.

and at last we return all this state function so that any component will import it and use it and component will change state. remember this state is global, one change from any component will affect other component if component is using state from this global function.

Now we create our main dialog component.

create new component file inside components/Dialog.vue, and add below code. we are not giving css right now..



<template>
  <h1> Dialog </h1>
  <div id="outSideDiv" @click.self="clickDiv"
    class="fixed modal-backdrop overflow-x-hidden overflow-y-auto inset-0 z-50  flex justify-center items-start mt-8 items-center">
    <div ref="divRef" class="relative w-auto  mx-auto max-w-sm max-w-2xl ">
      <div class="bg-white  w-full  rounded shadow-2xl ">
        <button @click="toggleModel"  class="fixed top-0 right-0">
              <svg
                width="20"
                height="20"
                class="text-red-900 bg-white hover:bg-gray-600 transition rounded"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>

        <slot />
      </div>
    </div>
  </div>
</template>

<script>
  import { ref } from "vue";
  import useToggleModal from "../API/toggleModel";

  export default {
    name: 'Dialog',
    setup(){
      const { state, toggleModel } = useToggleModal();

      function clickDiv (){
        console.log('click')
      }
      return {
        clickDiv,
        toggleModel
      }
    }
  }
</script>

we will first import our composition api inside script section of dialog component like this..

import useToggleModal from "../API/toggleModel";

and then, inside setup() function we get all returns function from useToggleModal.

const { state, toggleModel } = useToggleModal();

inside, template onButton click we directly using toggleModel function to close currently opend dialog.

Inside this dialog we used <slot /> , slot here is used to render user defined content inside this dialog component, so that user is free to decide what to do with this dialog.

now, lets see how we can use this dialog component inside our main app.js component...



<template>
  <div id="app">
    <button @click="onToggleModal('contentOne')"> Open Dialog </button>
    <Dialog v-if="hasRole('contentOne')">
      <ContentOne />
    </Dialog>
  </div>
</template>

<script>
  import Dialog from './components/Dialog';
  import ContentOne from './components/ContentOne';
  import useToggleModal from "./API/toggleModel";

  export default {
  name: 'App',
  setup(){
    const { openModal, hasRole } = useToggleModal();
    function onToggleModal(role) {
      openModal(role);
    }
    return{
      hasRole,
      openModal,
      onToggleModal
    }
  },
  components: {
    Dialog,
    ContentOne
  }
}
</script>

here, inside app.js component also we will import our composition api function useToggleModal() and getting returned function inside setup() function.. like openModal, hasRole..

Then inside template of app.js component, check button of opendialog, and onClikc of this button, we pass unique name to openModal function, and same name is checked by dialog component using v-if, if given name hasRole() is opened by user or not.

First time when application loads, hasRole() functions gets called and no role found open, so dialog is closed default, after user clicks on openDialog button then both have same role name and given dialog component will open with their own template as we have used inside dialog component. like ...

so, ContentOne is another component and is being rendered inside our dialog component.

Now, lets see whats inside contentOne component and we also open new dialog from inside contentOne component, so that second dialog will open inside first dialog and dialog stack will loaded inside this dialog..



<template>
  <h3>Content One </h3>
  <button @click="onToggleModal('contentTwo')">Open Second </button>
  <Dialog v-if="hasRole('contentTwo')">
    <h3> Second Content </h3>
  </Dialog>
</template>

<script>
  import Dialog from './Dialog';
  import useToggleModal from "../API/toggleModel";

  export default{
    name: 'ContentOne',
    setup(){
        const { openModal, hasRole } = useToggleModal();
        function onToggleModal(role){
          openModal(role);
        }
        return {
          openModal,
          hasRole,
          onToggleModal
        }
    },
    components: {
      Dialog
    }
  }
</script>

same as app.js component we will follow same structure, inside ContentOne component, just we open dialog with other name inside contentOne component and same has been checked by role inside hasRole()..

complete working example found inside below stackblitz link..

You can support me

Component property Binding in Angular and Vue3

GaurangDhorda — Wed, 03 Mar 2021 10:10:33 +0000

How to detect change of child component property and assign changed value to local scope variable in both angular and vue3.

You can support me

Both angular and vue3 provides better way to communicate between parent and child component using property binding. It is common practice to follow that not manipulate child property object direcetly, rather we detect changes of child property and assign changed data to local component variable, and after that manipulate data inside component using local component variable.

In Angular,
To declare property binding inside child component, Angular provides @Input() decorator. With @Input() decorator we can access property value from child component and parent component needs to pass binded data back to child component using [] property binding data.

// inside parent html.
<child [childProp] = "data" />

// inside child component.
@Input() childProp: unknown;

In Vue3,
To declare property binding inside child component, Vue3 provides props: { } , inside props object declare all property variable.
and inside parent component pass property binding using :props syntax.

// inside parent template
<Child :childProp = "data" />

//inside child component
props:{
     childProp: Array
}

Now we see how can we assign property value to local variable in both angular and vue3

For Angular, we are using @Input() setter function. this setter function is calling whenever new property value change occurs.

export class ChildComponent implements OnInit {
  tasks = [];
  @Input("tasks") set onTaskChange(taskData) {
    this.tasks = taskData;
  }
  constructor() {}

  ngOnInit() {}
}

Above, onTaskChange setter function is called when tasks props changes and property data is assigned to local tasks class variable.

For Vue3, it is very easy in vue3 using composition api. we are using toRefs from vue3 composition api setup() function.

<script>
    import { toRefs } from 'vue';
    export default{
    name: 'Child',
    props:{
      tasks:{
        type: Array,
        default : [{'id': 0, 'taskName': 'Default Task'}]
      }
    },
    setup(props){
      const localTasks = toRefs(props).tasks;
      return {
        localTasks
      }
    }
  }
</script>

Above, setup function is called by vue with local props object. we are creating copy of tasks props using toRefs and assign value to localTasks variable, and we are only returning localTasks from setup(). anything return from setup() is accessible from template of component. now localTasks is reactive variable and whenever prop changes fire our localTasks gets copy of props and template gets new value.

Angular Demo

Vue3 Demo

You can support me

Set angular page title and generate breadcrumbs links with `set-title-with-breadcrumbs` library

GaurangDhorda — Tue, 19 Jan 2021 08:49:06 +0000

I have published new npm library [ currently in beta ] for angular to generate Breadcrumbs component links and sets page title dynamically based on your current route page.
Have a look at it. You can reuse in your any angular 2.0+ project.

https://www.npmjs.com/package/set-title-with-breadcrumbs

Deploy angular project to Gitlab pages using gitlab.ci

GaurangDhorda — Sun, 01 Nov 2020 16:35:33 +0000

You can support me

How to deploy your gitlab repo to gitlab pages, using gitlab.ci

First of all, I am assuming..

You already have your Angular project ready.
You have already setup your Gitlab account.
You have already Gitlab repository ready.

When you creates your Gitlab repository at that time CI/CD pipeline is automatically build for you and set up for you by default by Gitlab account.

What is benefit of CI/CD ?
Once, everything is ready and setup correctly, When you push your code to remote repository, at that time one script is running parallelly, That script is creating your project and building your project automatically, and if everything is passed correctly, then production build code is ready to deploy to Gitlab pages, and your new code is published and ready to serve. Here, We are creating Gitlab ci.yml file.

[ Step 1 ] : Create .gitlab-ci.yml

Open your angular project. Inside root of your project [ at your package.json file ] create new file called ".gitlab-ci.yml". Inside this file add below script code.

image: node:12.19.0
pages:
  cache:
    paths:
      - node_modules/
  script:
    - npm install -g @angular/cli@10.1.3
    - npm install
    - npm run buildProd
  artifacts:
    paths:
      - public
  only:
    - master
    - pages

First of all,

"image:" is docker image and that image pulls node.js version 12.19.0.
Then inside "pages:", we are setting path of node_modules.
Inside "script:" first of all we install angular-cli. version is based on your angular project so change it accordingly. All pages projects are served from "public" folder so we have to change path of it too. We only deploy master branch and pages branch, any other branch will not detect inside CI/CD pipeline.

[ STEP 2 ] Add new scripts inside "package.json"

"buildProd": "ng build --base-href=/your-repo-name/",

here, you need to change base-path and base-path is based on your gitlab repository. To check gitlab repository base path at gitlab.com... settings -> pages and inside this path see Your pages are served under: section like https://grdtech.gitlab.io/pizza-shop
above /pizza-shop/ is your-repo-name

[ STEP 3 ] update output path inside angular.json file

"outputPath": "public",

After following above steps, if everything is okay then after some time your project is deployed to your pages path url like https://grdtech.gitlab.io/pizza-shop

Angular Router set dynamically document Title of page, Protect Router with guard, and Breadcrumbs component

GaurangDhorda — Sat, 31 Oct 2020 10:26:45 +0000

In this article, we are going to understand proper way...

How one can use angular router ?
How to protect angular router ?
How to set dynamic document title when route page changes ?
How to make Breadcrumbs component ?

In this project we are using Bootstrap and here I am not setting up content of bootstrap, I am assuming you have pre set up bootstrap component in angular project.

First of all create new angular project with routing option.

   ng new dynamictitle

open app-routing.module.ts file, and adds routing path.


  const routes: Routes = [
  {
    path: "",
    component: MainComponent,
    data: { title: "Root Page", breadcrums: "Root" }
  },
  {
    path: "login",
    component: LoginComponent,
    data: { title: "Login Page", breadcrums: "Login" }
  },
  {
    path: "home",
    component: HomeComponent,
    data: { title: "Home Page", breadcrums: "Home" },
    children: [
      {
        path: "records",
        component: RecordsComponent,
        data: { title: "Home / Records Page", breadcrums: "Records" },
        children: [
          {
            path: "findrecords",
            component: HelloComponent,
            data: { title: "Find Records Page", breadcrums: "Find-Records" }
          }
        ]
      }
    ],
    canActivate: [ProtectRouteGuard]
  },
  {
    path: "about",
    component: AboutComponent,
    data: { title: "About Page", breadcrums: "About" },
    canActivate: [ProtectRouteGuard]
  }
];

Now, we are adding some new properties above router file.

data : { title: '', breadcrumbs: '' }, data object have two property, later in component tree we need this information when that route in changed. title is displaying over document title, and breadcrumbs are displaying inside root page.
canActivate: [] , canActivate router guard protects our path, and we can not routed to this page without login to site or any restriction we are imposing based on user role.
children: [], this is used to set inner path of page. so this are inner routed pages or we can say this routes are children of related parent. like Home => Records => Find-Records.

as per route path configuration, create related component using..

   ng generate component Main

In above command just change for other components like..
Home, About, breadcrums, header, Login.

Now, generate child component of HomeComponent..

   ng g c home/records

and inside records component generate find records component..

   ng g c home/records/hello

Now, we are protecting our path..

for that generate new service and guard inside authentication folder, if not then create new root level authentication folder. inside that folder generate service and guard.

   ng g s authentication
   ng g guard protect-guard

Open authentication service...

   export class AuthenticationService {
  private isLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
    false
  );
  private isLoggedIn$ = this.isLoggedIn.asObservable();

  constructor(private router: Router) {}

  getIsUserLoggedIn(): Observable<boolean> {
    return this.isLoggedIn$;
  }
  setUserLoggedIn(loggedInStatus: boolean) {
    this.isLoggedIn.next(loggedInStatus);
    loggedInStatus
      ? this.router.navigate(["home"])
      : this.router.navigate(["login"]);
  }
}

and inside auth-guard..

   export class ProtectRouteGuard implements CanActivate {
  constructor(
    private authService: AuthenticationService,
    private router: Router
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.getIsUserLoggedIn().pipe(
      take(1),
      map((isLoggedIn: boolean) => {
        if (!isLoggedIn) {
          this.router.navigate(["login"]);
          return false;
        }
        return true;
      })
    );
  }
}

Now we provide protected-guard services inside app.module.ts

     providers: [ProtectRouteGuard]

and inside app-routing.module.ts file we protect route using canActivate: [ProtectRouteGuard]

Upto now, we are done protecting our routes, now we moove to second part series.

PART 2 [SETTING DYNAMIC TITLE PATH, and Breadcrums]

First, generate new main service..

   ng g s main

Then, inside main service...

   export class MainService {
  routerEventsTitle$: Observable<IUrlTitle>;
  breadCrumbs: IBreadCrums[] = [{ label: "", url: "" }];

  constructor(
    private title: GetSetPageTitleService,
    private router: Router,
    private activatedRouter: ActivatedRoute
  ) {
    this.routerEventsTitle$ = this.getSetRouterTitle();
  }

  setDefaultTitle(defaultTitle: string) {
    this.title.setCurrentTitle(defaultTitle);
  }

  getSetRouterTitle(): Observable<IUrlTitle> {
    return this.router.events.pipe(
      filter((event: RouterEvent) => event instanceof NavigationEnd),
      map((routeUrl: RouterEvent) => {
        let childRouter = this.activatedRouter.firstChild;
        while (childRouter.firstChild) {
          childRouter = childRouter.firstChild;
        }
        if (childRouter.snapshot.data["title"]) {
          let titleBreadCrums: IUrlTitle = {
            url: routeUrl.url,
            title: childRouter.snapshot.data["title"]
          };
          return titleBreadCrums;
        }
        return {
          url: routeUrl.url,
          title: this.title.getCurrentTitle()
        };
      }),
      map((titleUrl: IUrlTitle) => {
        this.breadCrumbs.length = 0;
        let menuItem = this.generateBreadCrums(this.activatedRouter.root);
        this.breadCrumbs.push(...menuItem);
        return { ...titleUrl, breadCrums: this.breadCrumbs };
      }),
      tap((currentTitle: IUrlTitle) => {
        // /this.breadCrumbs.push(currentTitle);
        this.title.setCurrentTitle(currentTitle.title);
        console.log("b ", this.breadCrumbs);
      })
    );
  }
  generateBreadCrums(
    activatedRouter: ActivatedRoute,
    url = "",
    breadcrumbs: IBreadCrums[] = [{ label: "", url: "" }]
  ): IBreadCrums[] {
    const children: ActivatedRoute[] = activatedRouter.children;

    if (children.length === 0) {
      return breadcrumbs;
    }

    for (const child of children) {
      const routeURL: string = child.snapshot.url
        .map(segment => segment.path)
        .join("/");
      if (routeURL !== "") {
        url += `/${routeURL}`;
      }

      console.log("url ", routeURL);
      const label = child.snapshot.data["breadcrums"];
      console.log("label ", label);
      if (label) {
        breadcrumbs.push({ label, url });
      }

      return this.generateBreadCrums(child, url, breadcrumbs);
    }
  }
}

Now, Open app.component.html file

   <ng-container *ngIf="routerEventsTitle$| async as routerTitle">
    <app-header> </app-header>
    <app-breadcrums [modelItems]="routerTitle.breadCrums"> </app-breadcrums>
    <div class="container">
        <router-outlet></router-outlet>
    </div>
</ng-container>

Now, Open app.component.ts file

   export class AppComponent {
  name = "Angular " + VERSION.major;
  appRootTitle = "Root Page";
  routerEventsTitle$: Observable<IUrlTitle>;

  constructor(private mainService: MainService) {
    this.mainService.setDefaultTitle(this.appRootTitle);
  }

  ngOnInit() {
    this.routerEventsTitle$ = this.mainService.routerEventsTitle$;
  }
}

First of all we inject main-service inside app.component.ts, then we gets Observable and subscribe it inside component using async pipe. then inside template file we pass input to breadcrums component.

Now, generate breadcrums.template file

   <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        Your are at :
        <li *ngFor="let bc of items; let last = last" class="breadcrumb-item" aria-current="page" [class.active]="last">
            <a *ngIf="last !==true" [routerLink]="bc.url"> {{bc.label}} </a>
            <span *ngIf="last" > {{bc.label}} </span>
        </li>
    </ol>
</nav>

Now, generate breadcrums.ts file

   export class BreadcrumsComponent implements OnInit {
  items;
  @Input("modelItems") set menu(item) {
    this.items = item;
  }
  constructor() {}

  ngOnInit() {}
}

Complete working example is here

Understand providedIn options in angular services

GaurangDhorda — Sun, 25 Oct 2020 10:07:05 +0000

Angular CLI by defaults creates services in root level of app.module. That is declared in services @Injectable( ) decorator. like... { providedIn:'root' }. As of now angular provides different options of angular services like [a] root [b] any [c] platform. Understand each option using small diagram, and understand what level service is declared and object is live within which level of application.

You can support me

1. { providedIn: 'root' }

As You can seen above our root module is "app.module.ts", and providedIn: 'root', creates only one singleton object for entire child module and root module too. we simply inject services inside component and same root-level object instance is shared between each component.

2. { providedIn: 'any' }

As you can seen in above image, if services are created using providedIn: 'any', Then, each and every module have their own object state and each time new instance of service is created. Each root module has their own instance, and for each lazy module has their own instance.

3. { providedIn: 'platform' }

As you can seen in above image, providedIn: 'platform' is new provided by angular, and its creates services instance only once, and then share state in each library and each level down to component tree.

[ NOTE: ] We can also declare services inside modules providers:[] arrays. If services defined in providers:[] array then, services are not tree-shakable, and if we declare services as per images shown above, using @Injectable(), decorator then this pattern is tree shakable. Tree-Shakable is when you never reference and used services in any of your component, then final production build will not include that services.

You can support me

Angular @Directives @Input() binding properly binding type understanding

GaurangDhorda — Mon, 15 Jun 2020 18:27:19 +0000

In angular when you use directive`s @input() without [ ] bracket, by default it is considered as HTML string property, and When set with [ ] is considered as javascript binding and we get actual what type we want to.

angular #javascript #angulartip #typescript

https://t.co/cEzWeRpgSR

Help to design angular components structure efficietly

GaurangDhorda — Fri, 12 Jun 2020 14:27:30 +0000

can you suggest solution of problem as shown in image..
more details here in this post https://stackoverflow.com/questions/62345750/how-to-design-angular-responsive-component-with-only-css