0

I have a custom WebComponent that I want to include in my project. The problem is that this component requires a certain ID to work properly, which is available in the route parameter. The idea behind this that I need my component to be initialized when the routeId variable itself is initialized. Currently when the component is available in the template, it is automatically initialized and I want it to be initialized when the routeId is initialized otherwise it gets an error.

I also added CUSTOM_ELEMENTS_SCHEMA in my module schemas

This is my code:

@Component({
  selector: 'app-details',
  template: '<x-component [attr.route-id]="routeId"></x-component>'
});

export class DetailComponent implements OnInit {
  routeId: string

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.routeId = params.get('routeId')
    })
  }
}

Thank you all for your help

@Component({
  selector: 'app-details',
  template: '<div *ngIf="show"><x-component [attr.route-id]="routeId"></x-component></div>'
});

export class DetailComponent implements OnInit {
  routeId: string
  show: boolean = false

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.routeId = params.get('routeId')
      this.show = true
    })
  }
}

This method doesn't work also.

Alex_K
  • 11
  • 2
  • Nothing in your second solution jumps out at me as incorrect. Are you confident that `routeId` is set correctly? If you change your `*ngIf` to something like `*ngIf="routeId"` does it behave differently? – possum Oct 27 '22 at 10:15
  • Yes routeId is set correctly I checked the value and it works. And also added routeId in ngIf but noting changes. It seems that when the value is updated it shows on the DOM but the component was initialised before the Angular init – Alex_K Oct 28 '22 at 09:09

0 Answers0