andrewarosario

// app.routing.module.ts
export const appRoutes: Routes = [{
  path: 'lazy',
  loadChildren: () => import('./lazy/lazy.routes')
    .then(routes => routes.lazyRoutes)
}];


// lazy.routes.ts
export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

andrewarosario

@Component({
  selector: 'app-user-detail'
})
export class UserDetailComponent {
  userDetail$ = injectUserDetail()
}

andrewarosario

export function injectUserDetail(): Observable<User> {
    const route = inject(ActivatedRoute);
    const userService = inject(UserService);
  
    return route.paramMap.pipe(
        switchMap((params) => {
            const id = params.get('orgId');
            return userService.getById$(id);
        })
    ); 

andrewarosario

@Directive({
  selector: '[visualizarInformacoesPrivilegiadas]',
})
export class VisualizarInformacoesPrivilegiadasDirective implements OnInit {
  constructor(private vendaCardComponent: VendaCardComponent) {}
  
  ngOnInit() {
    this.vendaCardComponent.visible.subscribe(visible => {
      this.visualizar(visible);
    });

andrewarosario

@Component({
  template: `
    <app-venda-card visualizarInformacoesPrivilegiadas>Dados do admin</app-venda-card>
  `
})
export class VendaAdminComponent {}


@Component({
  template: `

andrewarosario

@Directive({
  selector: '[visualizarInformacoesPrivilegiadas]',
})
export class VisualizarInformacoesPrivilegiadasDirective {
  @HostListener('visible', ['$event'])
  visualizar(visible: boolean) {
    // executa algum código
  }
}

andrewarosario

@Component({
  selector: 'app-venda-card'
  template: `
    <app-card (visible)="visible.next($event)">
      <ng-content></ng-content>
    </app-card>
  `
})
export class VendaCardComponent {
  @Input() isAdmin: boolean;

andrewarosario

@Component({
  selector: 'app-venda-card'
  template: `
    <app-card (visible)="visualizaInformacoesPrivilegiadas()">
      <ng-content></ng-content>
    </app-card>
  `
})
export class VendaCardComponent {
  @Input() isAdmin: boolean;

andrewarosario

@Component({
  template: `
    <app-card (visible)="visualizaInformacoesPrivilegiadas()">
      <p *ngIf="isAdmin">Dados do Admin</p>
      <p *ngIf="!isAdmin">Dados do Comercial</p>
    </app-card>
  `
})
export class VendaCardComponent {
  @Input() isAdmin: boolean;

andrewarosario

<form [formGroup]="form" storage="multi-step-form">
  <router-outlet></router-outlet>
</form>