Insert buttons dynamically in angular 13

Question

I have a parent component that sends an object via input to the child, but this object has a field with the title and another field that is a button containing an array.

when I do it the way below, the title appears as many times as it exists, so let's say I have 3 buttons, in the child component the title will appear 3 times too, this is the first point.

dados: IHeaderTitlePage = {
    title: 'Caption List'
    botoes: [
      {
        name: 'Parametrizações',
        icon: 'configuracao_outline',
        iconPosition: 'left',
        router: '../parametrizacao'
      },
      {
        name: 'Empresas',
        icon: 'empresas_outline',
        iconPosition: 'left',
        router: '/'
      },
      {
        name: 'adicionar',
        icon: 'adicionar',
        iconPosition: 'left',
        router: '../cadTecnico'
      }
    ]
  };

 <app-header-title-page *ngFor="let dado of dados"  [dados]="dado"  [titulo]="titulo"></app-header-title-page>

The other point is that when trying to use the [routerlink]="[variable name]" that comes with the route, it doesn't work, it gives an error.

So I need the title to appear only once and the buttons to appear as many arrays as exist in the button field and with functionality.

This is a page header that I will use on all of them so as not to repeat it, because on one page I don't pass buttons, on another I can pass one or two.

And the data will always be sent to the parent, it will not come from the bank.

In the child component looks like this:

<section class="row flex-container">

  <article class="col-6">
    <div class="menu">
      <h3 class="voxel-text-insight-bold voxel-color-text-heading-2" id="titulo">{{titulo}}</h3>
    </div>
  </article>


  <article class="col-6">
    <div class="butttons_config">
      <button  iconPosition="data.iconPosition" [routerLink]="[data.rota]">
        <icon>{{data.icon}}</icon>{{data.nome}}
      </button>
    </div>
  </article>


</section>

And as I said, this is generating as many lines as it comes from buttons.

I tried passing the data to the child component without doing the for as below:

<app-header-title-page   [dados]="dados" ></app-header-title-page>

And within the child component itself, do the for according to the ways I tried below:

<section class="row flex-container">
  <article class="voxel-col-6">
    <div class="menu">
      <h3 class="voxel-text-insight-bold voxel-color-text-heading-2" id="titulo">{{dados.nome}}</h3>
    </div>
  </article>

  <article class="col-6">
    <div class="butttons_config" *ngFor="let butons of dados">
      <button iconPosition="butons.botoes.iconPosition" [routerLink]="['butons.botoes.rota']">
        <icon>{{butons.botoes.icon}}</icon>{{butons.botoes.nome}}
      </button>
    </div>
  </article>

</section>

<section class="row flex-container">
  <article class="voxel-col-6">
    <div class="menu">
      <h3 class="voxel-text-insight-bold voxel-color-text-heading-2" id="titulo">{{dados.nome}}</h3>
    </div>
  </article>

  <article class="col-6"  *ngFor="let butons of dados">
    <div class="butttons_config">
      <button iconPosition="butons.botoes.iconPosition" [routerLink]="['butons.botoes.rota']">
        <icon>{{butons.botoes.icon}}</icon>{{butons.botoes.nome}}
      </button>
    </div>
  </article>

</section>

<section class="row flex-container">
  <article class="voxel-col-6">
    <div class="menu">
      <h3 class="voxel-text-insight-bold voxel-color-text-heading-2" id="titulo">{{dados.nome}}</h3>
    </div>
  </article>

  <article class="col-6" >
    <div class="butttons_config">
      <button  *ngFor="let butons of dados"  iconPosition="butons.botoes.iconPosition" [routerLink]="['butons.botoes.rota']">
        <icon>{{butons.botoes.icon}}</icon>{{butons.botoes.nome}}
      </button>
    </div>
  </article>

</section>

it doesn't show an error either on the screen or on the console, however, it doesn't render anything on the screen, everything is white.

In conclusion, this child component will only be a header of the page, containing the title of the page, and buttons if it has, for example, a registration button.

My css, I'm using flexbox, where I put the title on the left and the buttons on the right in line .

Answer 1

Fix your routerLink with that

routerLink="{{butons.botoes.rota}}"

or

[routerLink]="butons.botoes.rota"