[FIXED] Parse Input to child component Angular


I’m tying to make a dynamic navbar with Angular materials.

The idea is to create a "template" of a navbar that could be re-used in future projects, however I’m facing a difficulty while trying to order my navbar components.

Let’s say we have 4 components:

  • 1 parent component (app-nav-bar)
  • 3 child components (app-nav-bar-logo-image, app-nav-bar-logo-text, app-nav-bar-links)

What I would like to do is whenever I’m calling a parent component with specific agument only these components to appear, on the other hand I would like to be able to order those child components as I like.
A simple representaion of an idea

For some reason the placeElementsInOrder() function sorts the array with default values (100, 101, 102) instead of the ones that I’m passing in the app.component.html.

How can I first pass the arguments to a component and after they are passed then to sort them based on their order?




  logo = {    
    src: '../assets/images/logo.svg',
    path: './home',
    alternativeText: 'Logo',
    order: 3

  logoText = {    
    path: './home',
    text: 'LOGO',
    order: 2

  menuItems = [
    { label: 'HOME', path: '#' },
    { label: 'ABOUT', path: '#' },
    { label: 'PROJECTS', path: '#' },
    { label: 'CONTACT', path: '#' }

  navigationOptions = {
    navigationMenuItems: this.menuItems,
    order: 1


<mat-toolbar color="primary">
    <mat-toolbar-row fxLayoutAlign="space-around center">
        <ng-container class="navbar__items" *ngFor="let itemToAdd of listOfOrder">


export class NavBarComponent implements OnInit {

  @Input() logoIcon: logoIconModel = {
    src: '',
    path: '',
    alternativeText: '',
    order: 100

  @Input() logoText: logoTextModel = {   
    path: '',
    text: '',
    order: 101

  @Input() navigationOptions: navigationMenuLinksModel = {   
    navigationMenuItems: [{
        label: '', path: ''
      } as navigationMenuItemModel
    order: 102


  listOfOrder = placeElementsInOrder(this.logoIcon, this.logoText, this.navigationOptions);
  ngOnInit(): void {}

function placeElementsInOrder(logoIcon: logoIconModel, logoText: logoTextModel, navigationOptions: navigationMenuLinksModel): Array<any> {
  const listOfItems: any[] = [
    { order: logoIcon.order, type: 'logoIcon' },
    { order: logoText.order, type: 'logoText' },
    { order: navigationOptions.order, type: 'navMenuLinks' }
  return listOfItems.sort( (a,b) => a.order - b.order );


export interface logoIconModel {
    src: string
    path: string
    alternativeText: string
    order: number

export interface logoTextModel {
    path: string
    text: string
    order: number

export interface navigationMenuItemModel {
    label: string
    path: string

export interface navigationMenuLinksModel {
    navigationMenuItems: navigationMenuItemModel[]
    order: number


<a *ngIf="logoIcon" [routerLink]="logoIcon.path">
    <img [src]="logoIcon.src" [alt]="logoIcon.alternativeText">


<a *ngIf="logoText" [routerLink]="logoText.path">


You need to run placeElementsInOrder function on ngOnChanges.

ngOnChanges lifecycle hook runs when Input value changes. Since you are already running the placeElementsInOrder function when component loads it disregards the new values (coming from Input) and use the default values you have in the component.

import { OnChanges, SimpleChanges } from '@angular/core';

export class NavBarComponent implements OnChanges
    public ngOnChanges(changes: SimpleChanges): void
        this.listOfOrder = this.placeElementsInOrder(this.logoIcon, this.logoText, this.navigationOptions);

Answered By – Shivam

Answer Checked By – Robin (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published