+
{{ person.name }}
-
The list is empty !!
`,
styles: [],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
- persons: Person[] = [];
+ persons: Person[] = [
+ // { name: '123'},
+ // { name: '456'},
+ // { name: '789'},
+ // { name: 'abc'},
+ // { name: 'hiep'},
+ ];
}
diff --git a/apps/angular/3-directive-enhancement/src/app/ngFor.directive.ts b/apps/angular/3-directive-enhancement/src/app/ngFor.directive.ts
new file mode 100644
index 000000000..8aa646e23
--- /dev/null
+++ b/apps/angular/3-directive-enhancement/src/app/ngFor.directive.ts
@@ -0,0 +1,25 @@
+import { Directive, DoCheck, EmbeddedViewRef, inject, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+@Directive({
+ selector: '[ngFor]',
+ standalone: true,
+})
+export class NgForEmptyDirective
implements DoCheck {
+ private vcr = inject(ViewContainerRef);
+
+ // same input as ngFor, we just need it to check if list is empty
+ @Input() ngForOf?: T[] = undefined;
+
+ // reference of the empty template to display
+ @Input() ngForEmpty!: TemplateRef;
+
+ private ref?: EmbeddedViewRef;
+
+ ngDoCheck(): void {
+ this.ref?.destroy();
+ console.log(this.ngForOf, this.ngForEmpty)
+
+ if (!this.ngForOf || this.ngForOf.length === 0) {
+ this.ref = this.vcr.createEmbeddedView(this.ngForEmpty);
+ }
+ }
+}
diff --git a/apps/angular/6-structural-directive/src/app/dashboard/Guard/auth.guard.ts b/apps/angular/6-structural-directive/src/app/dashboard/Guard/auth.guard.ts
new file mode 100644
index 000000000..5b81686ca
--- /dev/null
+++ b/apps/angular/6-structural-directive/src/app/dashboard/Guard/auth.guard.ts
@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { CanMatch, Route, Router, UrlSegment } from '@angular/router';
+import { map } from 'rxjs';
+import { UserStore } from '../../user.store';
+
+@Injectable({ providedIn: 'root' })
+export class AuthGuard implements CanMatch {
+ constructor(
+ public router: Router,
+ public store: UserStore,
+ ) {}
+
+ public canMatch(route: Route, segments: UrlSegment[]) {
+ console.log('route ', route.data?.['roles'], segments);
+
+ return this.store.hasRole(route.data?.['roles']).pipe(
+ map((permission: boolean) => {
+ return permission;
+ }),
+ );
+
+
+ }
+}
diff --git a/apps/angular/6-structural-directive/src/app/dashboard/client.component.ts b/apps/angular/6-structural-directive/src/app/dashboard/client.component.ts
new file mode 100644
index 000000000..ac735cc58
--- /dev/null
+++ b/apps/angular/6-structural-directive/src/app/dashboard/client.component.ts
@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { ButtonComponent } from '../button.component';
+
+@Component({
+ selector: 'app-dashboard',
+ standalone: true,
+ imports: [RouterLink, ButtonComponent],
+ template: `
+ dashboard for CLIENT works!
+
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ClientDashboardComponent {}
diff --git a/apps/angular/6-structural-directive/src/app/dashboard/reader.component.ts b/apps/angular/6-structural-directive/src/app/dashboard/reader.component.ts
new file mode 100644
index 000000000..69dadbfc6
--- /dev/null
+++ b/apps/angular/6-structural-directive/src/app/dashboard/reader.component.ts
@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { ButtonComponent } from '../button.component';
+
+@Component({
+ selector: 'app-dashboard',
+ standalone: true,
+ imports: [RouterLink, ButtonComponent],
+ template: `
+ dashboard for READER works!
+
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReaderDashboardComponent {}
diff --git a/apps/angular/6-structural-directive/src/app/dashboard/writer.component.ts b/apps/angular/6-structural-directive/src/app/dashboard/writer.component.ts
new file mode 100644
index 000000000..869e17dde
--- /dev/null
+++ b/apps/angular/6-structural-directive/src/app/dashboard/writer.component.ts
@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { ButtonComponent } from '../button.component';
+
+@Component({
+ selector: 'app-dashboard',
+ standalone: true,
+ imports: [RouterLink, ButtonComponent],
+ template: `
+ dashboard for WRITER works!
+
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WriterDashboardComponent {}
diff --git a/apps/angular/6-structural-directive/src/app/information.component.ts b/apps/angular/6-structural-directive/src/app/information.component.ts
index e4adeb1b9..41bb6c151 100644
--- a/apps/angular/6-structural-directive/src/app/information.component.ts
+++ b/apps/angular/6-structural-directive/src/app/information.component.ts
@@ -1,19 +1,20 @@
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { UserStore } from './user.store';
+import { HasRoleDirective } from './role.directive';
@Component({
selector: 'app-information',
standalone: true,
- imports: [CommonModule],
+ imports: [CommonModule, HasRoleDirective],
template: `
Information Panel
- visible only for super admin
- visible if manager
- visible if manager and/or reader
- visible if manager and/or writer
- visible if client
+ visible only for super admin
+ visible if manager
+ visible if manager and/or reader
+ visible if manager and/or writer
+ visible if client
visible for everyone
`,
changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/apps/angular/6-structural-directive/src/app/login.component.ts b/apps/angular/6-structural-directive/src/app/login.component.ts
index cd36d9603..5f4a7ad79 100644
--- a/apps/angular/6-structural-directive/src/app/login.component.ts
+++ b/apps/angular/6-structural-directive/src/app/login.component.ts
@@ -12,6 +12,7 @@ import {
writer,
} from './user.model';
import { UserStore } from './user.store';
+import { HasRoleDirective } from './role.directive';
@Component({
standalone: true,
diff --git a/apps/angular/6-structural-directive/src/app/role.directive.ts b/apps/angular/6-structural-directive/src/app/role.directive.ts
new file mode 100644
index 000000000..4718b94ef
--- /dev/null
+++ b/apps/angular/6-structural-directive/src/app/role.directive.ts
@@ -0,0 +1,36 @@
+/* eslint-disable @angular-eslint/directive-selector */
+import { Directive, inject, Input, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
+import { UserStore } from "./user.store";
+import { Role } from "./user.model";
+// import { takeUntil } from "rxjs/operators";
+
+@Directive({
+ selector: '[hasRole]',
+ standalone: true,
+})
+class HasRoleDirective implements OnInit {
+
+ @Input('hasRole') role: Role | Role[] | undefined = undefined;
+
+ private templateRef = inject(TemplateRef);
+ private viewContainer = inject(ViewContainerRef);
+ private store = inject(UserStore);
+
+ ngOnInit(): void {
+ this.store.hasRole(this.role).subscribe((hasPermission: boolean)=>{
+ console.log('directive: ', hasPermission)
+ hasPermission? this.addTemplate() : this.clearTemplate()
+ })
+
+ }
+ private addTemplate() {
+ this.viewContainer.clear();
+ this.viewContainer.createEmbeddedView(this.templateRef);
+ }
+
+ private clearTemplate() {
+ this.viewContainer.clear();
+ }
+}
+
+export {HasRoleDirective };
diff --git a/apps/angular/6-structural-directive/src/app/routes.ts b/apps/angular/6-structural-directive/src/app/routes.ts
index 4db203f3b..caaf0ac57 100644
--- a/apps/angular/6-structural-directive/src/app/routes.ts
+++ b/apps/angular/6-structural-directive/src/app/routes.ts
@@ -1,4 +1,7 @@
-export const APP_ROUTES = [
+import { Route } from '@angular/router';
+import { AuthGuard } from './dashboard/Guard/auth.guard';
+
+export const APP_ROUTES: Route[] = [
{
path: '',
loadComponent: () =>
@@ -6,9 +9,58 @@ export const APP_ROUTES = [
},
{
path: 'enter',
+ canMatch: [AuthGuard],
+ data: {
+ roles: ['ADMIN'],
+ },
loadComponent: () =>
import('./dashboard/admin.component').then(
(m) => m.AdminDashboardComponent,
),
},
+ {
+ path: 'enter',
+ canMatch: [AuthGuard],
+ data: {
+ roles: ['MANAGER'],
+ },
+ loadComponent: () =>
+ import('./dashboard/manager.component').then(
+ (m) => m.ManagerDashboardComponent,
+ ),
+ },
+ {
+ path: 'enter',
+ canMatch: [AuthGuard],
+ data: {
+ roles: ['READER'],
+ },
+ loadComponent: () =>
+ import('./dashboard/reader.component').then(
+ (m) => m.ReaderDashboardComponent,
+ ),
+ },
+ {
+ path: 'enter',
+ canMatch: [AuthGuard],
+ data: {
+ roles: ['WRITER'],
+ },
+ loadComponent: () =>
+ import('./dashboard/writer.component').then(
+ (m) => m.WriterDashboardComponent,
+ ),
+ },
+ {
+ path: 'enter',
+ canMatch: [AuthGuard],
+ data: {
+ roles: ['CLIENT'],
+ },
+ loadComponent: () =>
+ import('./dashboard/client.component').then(
+ (m) => m.ClientDashboardComponent,
+ ),
+ },
+ { path: '**', redirectTo: '' },
];
diff --git a/apps/angular/6-structural-directive/src/app/user.model.ts b/apps/angular/6-structural-directive/src/app/user.model.ts
index 353a5e214..e68e9860c 100644
--- a/apps/angular/6-structural-directive/src/app/user.model.ts
+++ b/apps/angular/6-structural-directive/src/app/user.model.ts
@@ -1,4 +1,4 @@
-export type Role = 'MANAGER' | 'WRITER' | 'READER' | 'CLIENT';
+export type Role = 'MANAGER' | 'WRITER' | 'READER' | 'CLIENT' | 'ADMIN';
export interface User {
name: string;
@@ -9,7 +9,7 @@ export interface User {
export const admin: User = {
name: 'admin',
isAdmin: true,
- roles: [],
+ roles: ['ADMIN'],
};
export const manager: User = {
diff --git a/apps/angular/6-structural-directive/src/app/user.store.ts b/apps/angular/6-structural-directive/src/app/user.store.ts
index 1b00288b7..b629130c2 100644
--- a/apps/angular/6-structural-directive/src/app/user.store.ts
+++ b/apps/angular/6-structural-directive/src/app/user.store.ts
@@ -1,15 +1,38 @@
import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { User } from './user.model';
+import { BehaviorSubject, map } from 'rxjs';
+import { User ,Role, everyone} from './user.model';
@Injectable({
providedIn: 'root',
})
export class UserStore {
- private user = new BehaviorSubject(undefined);
+ private user = new BehaviorSubject(undefined);
user$ = this.user.asObservable();
add(user: User) {
this.user.next(user);
}
+
+ hasRole(role: string | string[] | undefined) {
+ console.log(this.user)
+ return this.user.pipe(
+ map((user) => {
+ if (role?.length === 0) return false;
+ const userRoles = user?.roles;
+ if (!userRoles || userRoles?.length === 0) {
+ return false;
+ }
+ if(userRoles.includes('ADMIN')){
+ return true;
+ }
+ if (Array.isArray(role)) {
+ return userRoles.some((userRole) => role.includes(userRole));
+ }
+ if (typeof role === 'string') {
+ return userRoles.some((userRole) => role === userRole);
+ }
+ return false;
+ })
+ );
+ }
}
diff --git a/apps/angular/8-pure-pipe/src/app/app.component.ts b/apps/angular/8-pure-pipe/src/app/app.component.ts
index 3c19fa169..fdc3d2eb0 100644
--- a/apps/angular/8-pure-pipe/src/app/app.component.ts
+++ b/apps/angular/8-pure-pipe/src/app/app.component.ts
@@ -1,21 +1,22 @@
import { NgFor } from '@angular/common';
import { Component } from '@angular/core';
+import { CustomPipe } from './custom.pipe';
@Component({
standalone: true,
- imports: [NgFor],
+ imports: [NgFor, CustomPipe],
selector: 'app-root',
template: `
- {{ heavyComputation(person, index) }}
+ {{ person | custom: index }}
+
`,
})
export class AppComponent {
persons = ['toto', 'jack'];
-
- heavyComputation(name: string, index: number) {
- // very heavy computation
- return `${name} - ${index}`;
+ onclick(){
+ this.persons[0]="tototo"
+ this.persons[2]="aaaaaa"
}
}
diff --git a/apps/angular/8-pure-pipe/src/app/custom.pipe.ts b/apps/angular/8-pure-pipe/src/app/custom.pipe.ts
new file mode 100644
index 000000000..77e0d58f7
--- /dev/null
+++ b/apps/angular/8-pure-pipe/src/app/custom.pipe.ts
@@ -0,0 +1,15 @@
+// custom.pipe.ts
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'custom',
+ standalone: true
+})
+export class CustomPipe implements PipeTransform {
+
+ transform(value: string, index: number): string {
+ if (!value) return value;
+ return `${value} - ${index}`;
+ }
+
+}
diff --git a/apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.html b/apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.html
index 9334b5bc9..b0dc85729 100644
--- a/apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.html
+++ b/apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.html
@@ -13,7 +13,7 @@
[formControl]="feedbackForm.controls.email"
placeholder="Email"
type="email" />
-
+
+
+ 
+
+ 
+
+