Hwo i can generate Angular component depends on my Config?

Question

I have an HTML snippet that I would like to use in my Angular component so that I can extend it using the config. Can anyone help me with this? I have big problems with the supbages

Config:

export const EmployeeLayoutSidebar = [

  {
    title: 'Startseite',
    icon: 'ni ni-tv-2',
    url: '#'
  },
  {
    title: 'Rechnungstool',
    icon: 'fas fa-money-bill-wave',
    link: '#',
  },
  {
    title: 'Formulare',
    icon: 'fas fa-file-alt',
    link: '#',
    subpages: [
      {
        title: 'Bewertungen',
        icon: 'caret',
        link: '#',
        subpages: [
          {
            title: 'Azubi',
            icoon: '',
            link: '#',
          }
        ],
      },
      {
        title: 'Bewerbung',
        icon: '',
        link: '#',
      }
    ],
  }

];

HTML Snippet:

<ul class="flex flex-col pl-0 mb-0 list-none">
  <!-- primary list item -->

  <li class="mt-0.5 w-full">
    <a active_primary active_page href="#" class="ease-in-out text-sm leading-default py-2.7 my-0 mx-2 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none rounded-lg bg-blue-500/30 px-4 font-semibold text-slate-700 transition-colors dark:text-white dark:opacity-80">
      <div class="stroke-none flex h-6 w-8 items-center justify-center rounded-lg bg-center fill-current p-2.5 text-center text-black">
        <i class="text-sm leading-normal ni ni-tv-2 text-slate-700/80 dark:text-white"></i>
      </div>
      <span class="ml-1 duration-300 opacity-100 pointer-events-none ease">Startseite</span>
    </a>
  </li>
  <li class="mt-0.5 w-full">
    <a collapse_trigger="primary" href="javascript:;" class="ease-in-out text-sm leading-default py-2.7 active after:ease-in-out after:font-awesome-5-free my-0 mx-2 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/50 dark:after:text-white" aria-controls="forms" role="button" aria-expanded="false">
      <div class="stroke-none flex h-6 w-8 items-center justify-center rounded-lg bg-center fill-current p-2.5 text-center text-black">
        <i class="text-sm leading-normal fas fa-file-alt text-slate-700/80 dark:text-white"></i>
      </div>
  
      <span class="ml-1 duration-300 opacity-100 pointer-events-none ease">Formulare</span>
    </a>
  
    <div class="h-auto overflow-hidden transition-all duration-200 ease-in-out max-h-0" id="forms">
      <ul class="flex flex-wrap mb-0 ml-6 list-none transition-all duration-200 ease-in-out">
        <li class="w-full">
          <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors  after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60  dark:after:text-white/50 dark:after:text-white" aria-expanded="false" href="javascript:;">
            <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> B </span>
            <span class="transition-all duration-100 pointer-events-none ease"> Bewertungen <b class="caret"></b></span>
          </a>
  
          <div class="h-auto overflow-hidden transition-all duration-200 ease-in-out max-h-0" id="forms1">
            <ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-in-out">
              <li class="w-full">
                <a href="./pages/forms/reviews/azubi.html" class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.4 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60">
                  <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> A </span>
                  <span class="transition-all duration-100 pointer-events-none ease"> Azubi </span>
                </a>
              </li>
  
            </ul>
          </div>
        </li>
  
        <li class="w-full">
          <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.4 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="./pages/authentication/signin/cover.html">
            <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> B </span>
            <span class="transition-all duration-100 pointer-events-none ease"> Bewerbung </span>
          </a>
        </li>
      </ul>
    </div>
  </li>

</ul>

I have already tried with several ngFor and ngIf queries and ChatGPT many things but I can't get it to work!

Answer 1

What you need is one component that render each item in the list, and each of those items will render child items in a recursive manner.

I've made an example in the simplest way and that solves your problem for now. You must adapt it with your own logics.

Example

Menu interface

TS

export interface MenuItem {
  title: string;
  icon: string;
  link: string;
  subpages?: MenuItem[];
}

Menu component

TS

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css'],
})
export class MenuComponent implements OnInit {
  @Input()
  level = 0;

  @Input()
  data!: MenuItem[];

  collapseTrigger: string | undefined;

  ngOnInit(): void {
    // you can use level property to add some level based logics
    switch (this.level) {
      case 0:
        this.collapseTrigger = 'primary';
        break;
      case 1:
        this.collapseTrigger = 'secondary';
        break;
    }
  }
}

HTML

<ul class="flex flex-col pl-0 mb-0 list-none">
  <!-- you can use level variable to add some level based logics -->
  <li
    *ngFor="let item of data"
    class="w-full"
    [ngClass]="{ 'mt-0.5 ': level === 0 }"
  >
    <a
      [attr.active_primary]="item.link === 'your logic'"
      [attr.active_page]="item.link === 'your logic'"
      [attr.collapse_trigger]="collapseTrigger"
      href="#"
      class="ease-in-out text-sm leading-default py-2.7 my-0 mx-2 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none rounded-lg bg-blue-500/30 px-4 font-semibold text-slate-700 transition-colors dark:text-white dark:opacity-80"
    >
      <div
        class="stroke-none flex h-6 w-8 items-center justify-center rounded-lg bg-center fill-current p-2.5 text-center text-black"
      >
        <i
          class="text-sm leading-normal ni ni-tv-2 text-slate-700/80 dark:text-white"
        ></i>
      </div>
      <span class="ml-1 duration-300 opacity-100 pointer-events-none ease">{{
        item.title
      }}</span>
    </a>

    <!-- will act recursively if it has subpages -->
    <div
      *ngIf="item.subpages && item.subpages.length > 0"
      class="h-auto overflow-hidden transition-all duration-200 ease-in-out max-h-0"
      id="forms"
    >
      <app-menu [data]="item.subpages" [level]="level + 1"></app-menu>
    </div>
  </li>
</ul>

Menu instantiation

HTML

<app-menu [data]="your menu data"></app-menu>

Hope this helps!