Passing Whole Data Using Safe Navigation in Angular

Question

I'm passing project(data) to whether display a certain view. It works however when i refresh the page the page it destroys the page. This div works <p class="admin">{{ project?.name }}</p>. However below codes, produces an error when i click refresh. The error is Cannot read property 'material_projects' of undefined when i click refresh. How do i pass as safe navigation in this *ngIf="getProjectType(projects) === 'mat_exist'"

<p *ngIf="getProjectType(projects) === 'mat_exist'">
      <ngb-alert type="success">
        You Already Have An Existing Material/s On This Project. <br>
        You Can Add More Material/s Below.
      </ngb-alert>
    </p>
    <p *ngIf="getProjectType(projects) === 'service_exist'">
      <ngb-alert  type="info">
        You Already Have An Existing Service/s On This Project. <br>
        You Can Add More Service/s Below.
      </ngb-alert>
    </p>

ts

 ngOnInit() {
        this.route.params 
          .subscribe((params: Params) => { 
          this.id = +params['id']; 
          this.projectsService = this.injector.get(ProjectsService);
          this.projectsService.getProject(this.id)
          .subscribe(
              (data:any) => {
                this.projects = data;
                console.log(data);

              },
              error => {
                alert("ERROR");
              })
          }); 
}

ts

public getProjectType(project): 'mat_exist' | 'mat_new' | 'service_exist' | null {
        return project.material_projects.length > 0 ? 'mat_exist'
            : project.project_services.length > 0 ? 'service_exist'
            : null;
    }

Answer 1

Since a possibility exists that project can be undefined, getProjectType function should take this into account:

public getProjectType(project): 'mat_exist' | 'mat_new' | 'service_exist' | null {
  if (!project) return null;
  ...
}

This condition can be alternatively moved to ngIf:

<p *ngIf="projects && getProjectType(projects) === 'mat_exist'">
...

Or additional ngIf can be added to parent element; if there's none then ng-container can be used instead:

<ng-container *ngIf="projects">
    <p *ngIf="getProjectType(projects) === 'mat_exist'">
    ...