Forem: Prayatna Bhattarai

Create dynamic nested menu items in Angular

Prayatna Bhattarai — Tue, 04 Jan 2022 11:31:18 +0000

I was looking for ways to create a dynamic menu where we get list of menu items from the api and I came across this stackoverflow question

This explains how to use ngTemplateOutlet to call your own custom template to populate the menu item by referencing the same template again.

if you have an array of menuItems like this:

menuItems: MenuItem[] = [
 {
    label: 'Home',
    href: '/home',
 },
 {
    label: 'Articles',
    href: '/articles',
    children: [
    {
      label: 'News',
      href: '/articles/news',
    },
    {
      label: 'Entertainment',
      href: '/articles/entertain',
    },
     ],
 },
 {
    label: 'About',
    href: '/about',
 },
];

I have used hardcoded value for menuItems but this can be populated by getting the value from the api.

So, on the HTML (view of the component) we only have to do is:

<nav>
 <ul class="navigation-list">
  <ng-template #menuItemTemplate let-items>
   <li *ngFor="let item of items">
    <a href="{{item.href}}">{{item.label}}</a>
     <ng-container *ngIf="item.children">
      <ul class="sub-menu">
      <ng-container *ngTemplateOutlet="menuItemTemplate; 
          context: { $implicit: item.children }">
        </ng-container>
      </ul>
     </ng-container>
    </li>
  </ng-template>
    ... more code will go here  
  </ul>
</nav>

Above, we have created our custom template using <ng-template> that creates a reference menuItemTemplate. The let-items inside the ng-template tag creates a variable that will be replaced by the $implicit value that we define inside the context of ngTemplateOutlet. Now, whenever a menu item has it's children then it will create the template by passing in the item.children array.

But how do we actually use the menuItems that we created on the component? We just have to call the template again by simply replacing ... more code will go here with
<ng-container *ngTemplateOutlet="menuItemTemplate; context: { $implicit: menuItems }"></ng-container> by using the actual value of menuItems.

And that's it. You will have your nested menu items, no matter how many children the menuItems will hold.

Would love to know more ways that you could create dynamic menus! please drop in on the comments

P.S: the menu is not styled so feel free to use your imagination :p

Http Subscription on RxJs : not to use complete as a finally substitute

Prayatna Bhattarai — Tue, 16 Mar 2021 06:13:56 +0000

Coming from the promise land, I was never aware of how .finally was substituted when subscribed to an observable.

The easy way of how I was using was to add it on complete the third param of subscribe

BUT whenever an error occurs on the http request the subscribe never calls the complete method

You can find more info here and here

To use finally like we do when dealing with Promises, we can use finalize operator and pipe it through the observable$ like this

this.someService.fetchDataFromApi()
  .pipe(
    finalize(() => {
      this.isBusy = false;
    }).subscribe(()=>{
     // next
    }, () => {
     // error
    }, () => {
     // complete
    });

I did have a look of another easier method - to add a function at the end of subscription by using .add() but it is actually used to add a teardown method on the subscription or add more subscription/child to your existing subscription. So the better way would be to use finalize as illustrated on the code above.

If you find other ways then please do share it :)

Rename folder to lowercase - Git

Prayatna Bhattarai — Thu, 28 Jan 2021 06:52:14 +0000

We are always having issues renaming a folder to lower case because git does not tend to understand the difference even if we change the folder.

The way we would rename is:

First move the folder to another temp. folder

git mv src/Home src/homes

Then move the folder to the desired folder name:

git mv src/homes src/home

Finally commit the change

git commit -m "rename folder from Home to home

If you are running windows, the rename may not reflect on the windows explorer so we follow similar approach. -> rename to temp folder and rename it back again

Rename-Item Home homes

commit the changes and again run

Rename-Item homes home

and finally push your changes.

We run webpack so sometimes it caches the build so have to run a build for prod and then again switch back to the local dev build.

Common Git commands

Prayatna Bhattarai — Tue, 01 Dec 2020 06:37:50 +0000

Few of the git command that we use at Student Edge:

Pulling from origin (note: master below can be replaced by any branch name)

git pull --rebase origin master

Switching to an existing branch

If you already have the branch locally you can just do

git checkout MyOtherBranch

if you don't have the branch locally you need to do the following

git fetch

git checkout -b MyOtherBranch remotes/origin/MyOtherBranch

Creating a new branch

git checkout -b MyNewBranch

Pushing your branch to origin

git push origin MyBranch

Commit your code to your current branch.

git add --all :/

git commit -m 'WR-123 I changed something'

Make a tweak to your previous commit

git commit --amend

After running the above it will open vim. Just type :wq and it will rebase and commit it

Remove a commit from your branch (note: the hats are how many commits to go back)

git rebase -i HEAD^^

After running this it will open vim with all the commits listed, the number of ^ will indicate how many commits it will show. Type i which will put it in edit mode. Delete the commit lines you want to remove. Then press Esc and then :rw to rebase.

Thanks to Dan, you can add this helper git file in the root of your user account folder (eg. C:\users\'myUser') and create your own git shortcuts (.gitconfig)

[user]name = Your user name
email = your@email.com

[alias]# Pretty text base branch tree
lg = log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit --date=relative

# When on master branch, force local master to be the same as origin
refreshmaster = checkout    -B master remotes/origin/master

# pretty diff of changes
diff = diff --word-diff=color

# After Fixing conflicts - OK to proceed with rebase
ok = rebase --continue

# Push the current branch upstream to it's namesake branch on origin
up = push origin HEAD

# Push the current branch upstream to it's namesake branch on origin with FORCE
upf = push -f origin HEAD

# Replace NEW stuff from master to my current branch
new = pull --rebase origin master

# Track all new changes
done = add --all :/

# Amend my last commit - request you to do "git add --all :/" or "done" first and then do `:wq` in vim to save and rebase
tweak = commit --amend

# Give a list of the last branches on my local git
lb = for-each-ref --sort=-committerdate --format='%(refname:short)' refs/heads/
changes = diff-tree --no-commit-id --name-only -r 

[push]
default = upstream

How to remove local branches that have been closed on master

Prayatna Bhattarai — Mon, 23 Nov 2020 06:20:36 +0000

In Git Bash/ Git CLI run the commands as follow (from whichever branch you are currently on):

git remote prune origin

Then:

checkout master
update it

and run in Git Bash/ Git CLI:

$ git branch --merged | grep -v "\*" | xargs -n 1 git branch -

And that's it!

To delete all local branches except master:

$ git branch | grep -v "master" | xargs git branch -D

Some commands to a further clean up: Git clean

TIL: How to pass data to parent component on a hybrid Angular project

Prayatna Bhattarai — Tue, 10 Nov 2020 14:07:58 +0000

Unlike my previous post where we passed data to a child component, we will pass data from a child component to an AngularJS (parent) component.

As with an Angular component, I use an event emitter to emit as @Output like

@Output() 
totalCountEvent = new EventEmitter<number>();

So, I'm trying to get the total count to the parent component (AngularJS component) subject and we place the listing component to the subject.component.html as

<div>
 ...
  <subject-listing 
   (total-count-event)= 
        "updateTotalEarnablePoints($event)">
  </subject-listing>
</div>

This is the same way we do it on any of the Angular components, but the only difference is (total-count-event). We have to use kebab-casing.

And on our angularjs module, we downgrade the subject-listing.component.ts as

.directive("subjectListing", downgradeComponent({ component: SubjectListingComponent, outputs: ['totalCountEvent'] } as any));

With that, you can easily use the totalCountEvent on the AngularJS subject.component.html component.

TIL: How to use form builder to create groups in Angular

Prayatna Bhattarai — Fri, 30 Oct 2020 14:40:56 +0000

We can use the formBuilder service to group all the form fields. I start with injecting FormBuilder from angular/forms and inject in my contactComponent

import { FormBuilder } from '@angular/forms';

@Component({
  selector: "contact",
  templateUrl: "./contact.component.html",
  styleUrls: ["./contact.component.css"]
})
export class ContactComponent implements OnInit {
  constructor(private fb: FormBuilder) { }
 ...
}

Since it is a contact form, I have name, email, and message as the form fields. So I create a form group as

 contactForm = this.fb.group({
    name: [''],
    email: [''],
    message: ['']
  });

I then can eventually add validation for each of the fields

contactForm = this.fb.group({
    name: ['', Validators.required],
    email: ['', Validators.required],
    message: ['', Validators.required]
  });

Then you would basically use it in the input as

<input type="text" formControlName="name">

And that's it. There seems to be a lot of things that you can do with the form, but that will be a post for another day.

TIL: How to create a custom pipe in Angular

Prayatna Bhattarai — Thu, 29 Oct 2020 13:59:09 +0000

To build a custom pipe, just create a class that implements PipeTransfrom like this:

transform-to-space.pipe.ts

export class TransformToSpace implements PipeTransform {
  transform(value: string, symbol: string): any {
    return value.replace(symbol, ' ');
  }
}

As the class above implements PipeTransform, we are required to implement every property/method. In this case, we need to implement the transform method.

The custom pipe we are creating takes a character and converts that to space. The final class will look something like this:

transform-to-space.pipe.ts final

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'transformToSpace'
})

export class TransformToSpace implements PipeTransform {
  transform(value: string, symbol: string): any {
    return value.replace(symbol, ' ');
  }
}

In order to use the pipe we put this on the template like so:

<p>{{message.value | transformToSpace:'<'}}</p>

We use the same name as assigned under

@Pipe({
  name: 'transformToSpace'
})

Since transform takes two param: value in this case is message.value and symbol is defined after pipe name and colon like transformToSpace:'<'. And that is how you create and use a custom pipe.

TIL: ngIf can also have an else clause in Angular

Prayatna Bhattarai — Wed, 28 Oct 2020 13:17:40 +0000

I have a message component that makes an async call to retrieve the message. In my template, I use the async pipe to populate the view. So on the component, I have a message$ that gets the message from a service like so:

message$ = this.messageService.getMessage();

and in my message-component.html I have

<div *ngIf="message$ | async as message">
      {{message.value}}
</div>
-- other code

But the issue here is, I don't want my view to be empty when the message is being retrieved. I can use the else clause inside the *ngIf statement and define a template that replaces the div from above to show that something is loading. You can use a loading spinner or something similar, but for simplicity, I will just use a div with a text. So my final view will be something like

message.component.html

<div *ngIf="message$ | async as message; else isBusy">
  {{message.value}}
</div>
<ng-template #isBusy>Loading...</ng-template>

And that's it; hope that helps.

PS: The method stated above may not always be the best way to show a loading spinner for an async call, if there is any better way of doing it please let me know. TIA

TIL: How to use async pipe and populate mat-select

Prayatna Bhattarai — Tue, 27 Oct 2020 13:13:12 +0000

I was trying to use async | pipe directly on the view to get all the country list and populate my mat-select dropdown. The countrySelector component has a countryList$ observable which gets all the country from a service like so:

 ...
  ngOnInit(): void {
    this.countryList$ = this.countryService.getCountries();
  }
 ...

Then in my view, I use ng-container with an *ngIf clause to check if the country list is available.

<ng-container *ngIf="countryList$ | async as countryList">

I then use the countryList and populate the mat-select which uses *ngFor to go through the list of countries and add a mat-option for each of the item. It also has a poperty onSelectionChange which fires an event when a selection is changed. My final view will look something like this:

<ng-container *ngIf="countryList$ | async as countryList">
 <mat-select>
  <mat-option *ngFor=" let country of countryList 
     [value]="country"
     (onSelectionChange)="changeCurrentSelection($event, 
     country)">                  
    {{country.name}}
  </mat-option>
 </mat-select>
</ng-container>

This way I can populate the mat-option without having to assign it to any variable on the component and directly use it in the view.

Please let me know if there are any other better ways to do it.

TIL: How to pass data from child to parent component using a template variable

Prayatna Bhattarai — Mon, 26 Oct 2020 14:18:00 +0000

Was trying to look for ways on how to pass data around from a child to a parent component and I found a very easy way - using a template variable.

If you had followed my previous post, I used the postMessage component to post a message that has been used on the child component i.e the message component by using Output(). But I have found a cleaner way.

post-message.component.html

<div>
    .. other stuff
    <message #myMessage></message>
  <div>{{myMessage.message.value}}</div>
</div>

#myMessage is a template variable that you can use on the postMessage component's view. So here, I could access any public field or methods of the message component through the template variable.

message.component.ts

import { Component, EventEmitter, OnInit, Output } from "@angular/core";

@Component({
  selector: "message",
  templateUrl: "./message.component.html",
  styleUrls: ["./message.component.css"]
})
export class MessageComponent implements OnInit {
  message: IMessage;
  constructor() {}

  ngOnInit() {
    //eg message - would basically come from user input though
    this.message = {
      value: "This is a message I like to post",
      id: 1
    };
  }
}

So, whatever I assign to this.message will have the value available on the postMessage component which is the parent component of message

Hope that is handy. :D

TIL: How to pass data from child to parent component in Angular

Prayatna Bhattarai — Sun, 25 Oct 2020 13:07:59 +0000

A simple way to pass data from the child to the parent component using EventEmitter.

I have a child component which holds a message object and I want to pass it back to the parent postMessage component

message.component.ts

import { Component, EventEmitter, OnInit, Output } from "@angular/core";

@Component({
  selector: "message",
  templateUrl: "./message.component.html",
  styleUrls: ["./message.component.css"]
})
export class MessageComponent implements OnInit {
  message: IMessage;
  @Output()
  postMessageEvent = new EventEmitter();

  constructor() {}

  ngOnInit() {
    //eg message - would basically come from user input though
    this.message = {
      value: "This is a message I like to post",
      id: 1
    };
  }

  handleClick() {
    this.postMessageEvent.emit(this.message);
  }

If you look closely, I have created an @Output postMessageEvent that emits the current message when the handleClick() function gets called from the view

message.component.html

<div>
  {{message.value}}
  <button (click) = handleClick()>Post message</button>
</div>

This is just a simple view that displays the message value and has a button that calls the handleClick() function when pressed. It would be better to have an input field, but that is a topic for another day ;)

Now back to the parent component. In order to get the message object, I call the postMessageEvent through the view like so

post-message.component.html

<div>
 ...
 <!-- other code -->
 <message (postMessageEvent)=postMessage($event)></message>
</div>

I use the same event name postMessageEvent inside the brackets and assign that to a function postMessage() on the component like

post-message.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "post-message",
  templateUrl: "./post-message.component.html",
  styleUrls: ["./post-message.component.css"]
})
export class PostMessageComponent implements OnInit {
  constructor() {}

  ngOnInit() {}

  postMessage(messageFromChild: IMessage) {
    console.log(messageFromChild.id);
    console.log(messageFromChild.value);
    //call service/api to post message
  }
}

As we emit the message from the child component, the postMessage function takes a parameter which is basically the message object from the child. So when you click the button on the child component the postMessage on the parent component gets fired and you have access to the current message object And that's all. Now you can use your messageFromChild to call a service/api or do anything you want.