QuizComponent

The QuizComponent also features some Edit and Delete buttons that we should definitely hide from the sight of any non-logged in user.

Again, we need to open the quiz.component.ts file and do what it takes to add the AuthService class to the loop:

[...]import { AuthService } from '../../services/auth.service';[...]constructor(private activatedRoute: ActivatedRoute,    private router: Router,    private http: HttpClient,    public auth: AuthService,    @Inject('BASE_URL') private baseUrl: string) {[...]

We then use it to conditionally hide the Edit and Delete buttons in the quiz.component.html template file:

[...]<div *ngIf="auth.isLoggedIn()" class="edit">    <input type="button" value="Edit"            (click)="onEdit()" class="btn btn-sm btn-warning" ...

Get ASP.NET Core 2 and Angular 5 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.