How to render a component in the center of the screen? - Angular

Question

I'm doing this project with what I'm learning about angular. Now I'm in doubt about what would be the best way to render a component within this main component.

repo: https://github.com/jrsbaum/crud-angular

demo: https://crud-angular-jrsbaum.vercel.app/login

login: [email protected]

password: 12345

I would like to click on Item or Home and the Item or Home component appears where it says content here

main-nav.component.html

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button mat-icon-button class="icon" (click)="sidenav.toggle()" abbr title="Abre menu lateral"
      aria-label="Botão toggle abre menu lateral">
      <mat-icon>toc</mat-icon>
    </button>
    <div> My Crud App</div>
    <div class="espacamento-toolbar"></div>
    <button mat-icon-button (click)="deslogar()" abbr title="Logout" aria-label="Botão para deslogar">
      <mat-icon>logout</mat-icon>
    </button>
  </mat-toolbar-row>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav>
    <mat-nav-list>

      <a mat-list-item [routerLink]="'/home'"> Home </a>
      <a mat-list-item [routerLink]="'/itens'"> Itens </a>


    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <div>
      <router-outlet>
        content here
      </router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

main-nav.component.ts

import { Component } from '@angular/core';
import { UsuarioService } from 'src/app/services/usuario.service';

@Component({
  selector: 'app-main-nav',
  templateUrl: './main-nav.component.html',
  styleUrls: ['./main-nav.component.scss'],
})
export class MainNavComponent {
  constructor(private usuarioService: UsuarioService) {}

  deslogar() {
    this.usuarioService.deslogar();
  }
}

item-listar.component.ts

import { Component, OnInit } from '@angular/core';
import { ItemService } from '../../../../../services/item.service';
import { Observable } from 'rxjs';
import { Item } from '../../../../../interfaces/IItem';

@Component({
  selector: 'app-item-listar',
  templateUrl: './item-listar.component.html',
  styleUrls: ['./item-listar.component.scss'],
})
export class ItemListarComponent implements OnInit {
  itens$: Observable<Item[]> | undefined;

  colunasTabela = ['id', 'nome', 'descricao', 'preco'];

  constructor(private itemService: ItemService) {}

  ngOnInit() {
    this.listarItens();
  }

  listarItens() {
    this.itens$ = this.itemService.listar();
  }
}

item-listar.component.html

<mat-toolbar>Lista de Itens</mat-toolbar>

<ng-template #carregando>
  <mat-spinner></mat-spinner>
</ng-template>

<div class="componente-container">
  <div *ngIf="itens$ | async as itens; else carregando">
    <table mat-table [dataSource]="itens">
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID </th>
        <td mat-cell *matCellDef="let item">
          <a routerLink="/itens/editar/{{item.id}}"> {{item.id}}</a>
        </td>
      </ng-container>
      <ng-container matColumnDef="nome">
        <th mat-header-cell *matHeaderCellDef> Nome </th>
        <td mat-cell *matCellDef="let item">
          <a routerLink="/itens/editar/{{item.id}}"> {{item.nome}}</a>
        </td>
      </ng-container>
      <ng-container matColumnDef="descricao">
        <th mat-header-cell *matHeaderCellDef> Descrição </th>
        <td mat-cell *matCellDef="let item">
          <a routerLink="/itens/editar/{{item.id}}"> {{item.descricao}}</a>
        </td>
      </ng-container>
      <ng-container matColumnDef="preco">
        <th mat-header-cell *matHeaderCellDef> Preço </th>
        <td mat-cell *matCellDef="let item">
          <a routerLink="/itens/editar/{{item.id}}"> R$ {{item.preco}}</a>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="colunasTabela"></tr>
      <tr mat-row *matRowDef="let row; columns: colunasTabela;"></tr>
    </table>
  </div>
  <div class="linha-botoes">
    <button mat-raised-button color="primary" routerLink="/itens/cadastrar">Cadastrar</button>
  </div>
</div>

main-nav-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainNavComponent } from './main-nav.component';

const routes: Routes = [{ path: '', component: MainNavComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class MainNavRoutingModule {}

main-nav.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { MainNavRoutingModule } from './main-nav-routing.module';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MainNavRoutingModule
  ]
})
export class MainNavModule { }

app-routing-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { UsuarioAutenticadoGuard } from './services/guards/usuario-autenticado.guard';
import { UsuarioNaoAutenticadoGuard } from './services/guards/usuario-nao-autenticado.guard';
import { MainNavComponent } from './pages/main-nav/main-nav.component';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [UsuarioNaoAutenticadoGuard],
  },
  {
    path: '',
    component: MainNavComponent,
    canActivate: [UsuarioAutenticadoGuard],
  },
  {
    path: 'home',
    loadChildren: () =>
      import('./pages/home/home.module').then((modulo) => modulo.HomeModule),
    canActivate: [UsuarioAutenticadoGuard],
  },
  {
    path: 'itens',
    loadChildren: () =>
      import('./pages/compartilhado/item/item-listar/item-listar.module').then(
        (modulo) => modulo.ItemListarModule
      ),
    canActivate: [UsuarioAutenticadoGuard],
  },
  {
    path: 'itens/cadastrar',

    loadChildren: () =>
      import(
        './pages/compartilhado/item/item-cadastrar-editar/item-cadastrar-editar.module'
      ).then((modulo) => modulo.ItemCadastrarEditarModule),
    canActivate: [UsuarioAutenticadoGuard],
  },
  {
    path: 'itens/editar/:id',
    loadChildren: () =>
      import(
        './pages/compartilhado/item/item-cadastrar-editar/item-cadastrar-editar.module'
      ).then((modulo) => modulo.ItemCadastrarEditarModule),
    canActivate: [UsuarioAutenticadoGuard],
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Answer 1

You have to edit your routing and see your home-component and item-component as child-components of your main-nav component.

So your components will be renderer into your main-nav-component