mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-12 22:03: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
|
- Writer
|
||||||
- Reader and Writer
|
- Reader and Writer
|
||||||
- Client
|
- Client
|
||||||
|
- Everyone
|
||||||
|
|
||||||
### Step 1
|
### 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:
|
You should end up with something like below:
|
||||||
|
|
||||||
```html
|
```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
|
### 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
|
### Submitting your work
|
||||||
|
|
||||||
|
|||||||
@@ -9,10 +9,12 @@ import { UserStore } from './user.store';
|
|||||||
template: `
|
template: `
|
||||||
<h2 class="mt-10 text-xl">Information Panel</h2>
|
<h2 class="mt-10 text-xl">Information Panel</h2>
|
||||||
<!-- admin can see everything -->
|
<!-- admin can see everything -->
|
||||||
|
<div>visible only for super admin</div>
|
||||||
<div>visible if manager</div>
|
<div>visible if manager</div>
|
||||||
<div>visible if manager and/or reader</div>
|
<div>visible if manager and/or reader</div>
|
||||||
<div>visible if manager and/or writer</div>
|
<div>visible if manager and/or writer</div>
|
||||||
<div>visible if client</div>
|
<div>visible if client</div>
|
||||||
|
<div>visible for everyone</div>
|
||||||
`,
|
`,
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { InformationComponent } from './information.component';
|
|||||||
import {
|
import {
|
||||||
admin,
|
admin,
|
||||||
client,
|
client,
|
||||||
|
everyone,
|
||||||
manager,
|
manager,
|
||||||
reader,
|
reader,
|
||||||
readerAndWriter,
|
readerAndWriter,
|
||||||
@@ -25,6 +26,7 @@ import { UserStore } from './user.store';
|
|||||||
<button app-button (click)="writer()">Writer</button>
|
<button app-button (click)="writer()">Writer</button>
|
||||||
<button app-button (click)="readerWriter()">Reader and Writer</button>
|
<button app-button (click)="readerWriter()">Reader and Writer</button>
|
||||||
<button app-button (click)="client()">Client</button>
|
<button app-button (click)="client()">Client</button>
|
||||||
|
<button app-button (click)="everyone()">Client</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<app-information></app-information>
|
<app-information></app-information>
|
||||||
@@ -55,4 +57,7 @@ export class LoginComponent {
|
|||||||
client() {
|
client() {
|
||||||
this.userStore.add(client);
|
this.userStore.add(client);
|
||||||
}
|
}
|
||||||
|
everyone() {
|
||||||
|
this.userStore.add(everyone);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -41,3 +41,9 @@ export const client: User = {
|
|||||||
isAdmin: false,
|
isAdmin: false,
|
||||||
roles: ['CLIENT'],
|
roles: ['CLIENT'],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const everyone: User = {
|
||||||
|
name: 'client',
|
||||||
|
isAdmin: false,
|
||||||
|
roles: [],
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user