mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 12:53:03 -05:00
feat(challenge6): improve readme
This commit is contained in:
@@ -18,6 +18,7 @@ In LoginComponent, you will find 6 buttons corresponding at 6 differents users.
|
||||
- Writer
|
||||
- Reader and Writer
|
||||
- Client
|
||||
- Everyone
|
||||
|
||||
### Step 1
|
||||
|
||||
@@ -31,12 +32,20 @@ In **InformationComponent**, display the correct piece of information for each r
|
||||
You should end up with something like below:
|
||||
|
||||
```html
|
||||
<div *hasRole="Manager">Info for Manager</div>
|
||||
<div *hasRole="Role1">Info for Role1</div>
|
||||
```
|
||||
|
||||
```html
|
||||
<div *hasRole="['Role1', 'Role2']">Info for Role1 and Role2</div>
|
||||
```
|
||||
|
||||
```html
|
||||
<div *hasRoleSuperAdmin="true">Info Only for superadmin</div>
|
||||
```
|
||||
|
||||
### Step 2
|
||||
|
||||
In **Routes.ts**, route all user to the correct DashboardComponent using CanMatch guard.
|
||||
In **Routes.ts**, route all user to the correct **DashboardComponent** using **CanMatch** guard.
|
||||
|
||||
### Submitting your work
|
||||
|
||||
|
||||
@@ -9,10 +9,12 @@ import { UserStore } from './user.store';
|
||||
template: `
|
||||
<h2 class="mt-10 text-xl">Information Panel</h2>
|
||||
<!-- admin can see everything -->
|
||||
<div>visible only for super admin</div>
|
||||
<div>visible if manager</div>
|
||||
<div>visible if manager and/or reader</div>
|
||||
<div>visible if manager and/or writer</div>
|
||||
<div>visible if client</div>
|
||||
<div>visible for everyone</div>
|
||||
`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
|
||||
@@ -5,6 +5,7 @@ import { InformationComponent } from './information.component';
|
||||
import {
|
||||
admin,
|
||||
client,
|
||||
everyone,
|
||||
manager,
|
||||
reader,
|
||||
readerAndWriter,
|
||||
@@ -25,6 +26,7 @@ import { UserStore } from './user.store';
|
||||
<button app-button (click)="writer()">Writer</button>
|
||||
<button app-button (click)="readerWriter()">Reader and Writer</button>
|
||||
<button app-button (click)="client()">Client</button>
|
||||
<button app-button (click)="everyone()">Client</button>
|
||||
</header>
|
||||
|
||||
<app-information></app-information>
|
||||
@@ -55,4 +57,7 @@ export class LoginComponent {
|
||||
client() {
|
||||
this.userStore.add(client);
|
||||
}
|
||||
everyone() {
|
||||
this.userStore.add(everyone);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,3 +41,9 @@ export const client: User = {
|
||||
isAdmin: false,
|
||||
roles: ['CLIENT'],
|
||||
};
|
||||
|
||||
export const everyone: User = {
|
||||
name: 'client',
|
||||
isAdmin: false,
|
||||
roles: [],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user