Creating a header for our app

ng g c components/header --skip-tests=true

<!--header.component.html-->
<mat-toolbar color="primary">
    <span>Angular Basic</span>
    <button mat-button>Grocery</button>
    <button mat-button>Sports</button>
</mat-toolbar>

mat-toolbar {
  margin-bottom: 10px;
}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [CommonModule, MatToolbarModule, MatMenuModule, MatButtonModule, RouterModule],
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {

}

<!--app.component.html-->
<app-header></app-header>
<app-card [titles]="cardsTitle" (titleEvent$)="addCard($event)"></app-card>

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    standalone: true,
    imports: [HeaderComponent]
})
export class AppComponent {
}