How to add css for ion-menu in ionic 4 as there is no app.css is available? - angular7

Question

I want to design the ion-menu and implement css in the menu but where we will write the css i am not getting as there is no app.css is available.
I want to add the categories and inside that i want to add sub categories but from the web service. How to do this please help me.
I have tried but i am able to show the menu options static not dynamic which i will get from the api.
Please guide me what to do.
<ion-app>
<ion-menu contentId="content" side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div *ngFor="let p of pages">
<ion-menu-toggle *ngIf="p.url">
<ion-item [routerLink]="p.url" routerDirection="root" routerLinkActive="active">
<ion-icon [name]="p.icon" slot="start"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open" [class.parent-active]="p.open"
style="font-weight: 500;" detail="false">
<ion-icon slot="start" name="arrow-forward" *ngIf="!p.open"></ion-icon>
<ion-icon slot="start" name="arrow-down" *ngIf="p.open"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
<ion-list *ngIf="p.open">
<ion-menu-toggle>
<ion-item *ngFor="let sub of p.children" class="sub-item" style="padding-left: 20px;
font-size: small;" [routerLink]="sub.url" routerDirection="root" routerLinkActive="active"
style="--ion-text-color: var(--ion-color-primary);">
<ion-icon [name]="sub.icon" slot="start"></ion-icon>
<ion-label>
{{ sub.title }}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet [swipeGesture]="false" id="content" main></ion-router-outlet>
</ion-app>
I want the dynamic data to display in the side menu and design the side menu.
app.component.ts
pages = [
{
title: 'Main',
url: '/home',
icon: 'home'
},
{
title: 'Categories',
children: [
{
title: 'categories',
url: '/categories',
icon: 'arrow-dropright'
},
{
title: 'wishlist',
url: '/wishlist',
icon: 'arrow-dropright'
}, {
title: 'Your Orders',
url: '/your-orders',
icon: 'arrow-dropright'
}, {
title: 'My Profile',
url: '/profile',
icon: 'play'
}
]
}, {
title: 'Offers',
children: [
{
title: 'categories',
url: '/categories',
icon: 'play'
},
{
title: 'wishlist',
url: '/wishlist',
icon: 'play'
},
]
}, {
title: 'LogOut',
url: '/user-login',
icon: 'log-out'
}
];

Answer 1

Use style below ion-content
for example this will make your ion-menu background black.Like that do for other elements inside your menu
<style>
ion-content{
background:black;
}
</style>

Answer 2

You can add app.componet.scss in src directory. And you have to add styleUrls to Component decorator like below:
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None
})