Stop Mat Dialog from appearing based on condition

Question

I would like for a Mat Dialog to not appear if a specific condition has not been met. I had hoped to use Angular Guard, but there seems to not be an associated route with the component (aside of the overarching webpage it's called from).
[Consequently, I had hoped that it would fall under the canActivateChild - but that stopped the whole page from loading. ]

I've rolled back my example to just trying to stop a particular component ('give-feedback') from being accessible based on the FeedBackGuard component (which now only returns false).

The feedback component is called by a function on a page /example. I have tried setting canActivate (for the component), canActivateChild (as a subset of example page), setting canLoad, and multiple variations within.
Thus far, I have only succeeded in stopping example from loading but not from the Mat Dialog being initiated for give-feedback

Currently, the configuration in app-routing.module.ts is:

{path: 'Example', component: ExampleComponent,
  canActivateChild : [FeedbackGuard],
      children: [
      {  path: 'feedback-example', component: MatDialog  },
      {  path: 'feedback-example', component: GiveFeedbackComponent  }
      ] 
},

score 0 · Answer 1 · answered Apr 08 '21 at 18:05

I had hoped to use Angular's Guard function to do this. I had seen examples of people just not loading 'children'. Anything I tried to that end blocked the whole page e.g. blocking Mat Dialog or the GetFeedbackComponent.

Consequently, I just used *ngIf to check for a certain value, set a boolean, variable and only display the corresponding give-feedback link/button if the boolean was true.

In the HTML:

 <div *ngIf="(booleanVariable)"> 
       <td (click)="giveFeedback()"> Give feedback </td>
    </div>

In the component.ts:

this.http.get('/variableinfo/').subscribe(data => {
       const varInfo = Object.keys(data).map(key => data[key]);
       this.booleanVariable = varInfo[0][0].name;
        }

Stop Mat Dialog from appearing based on condition

1 Answers1