just coment

code-snapshots/07-directives-deep-dive/05-hostdirectives/src/app/app.component.html

@@ -1,17 +1,17 @@
 <main>
   <app-learning-resources />
-
   <hr />
-
   <app-auth />
 
   <!-- @if (isAdmin()) {
     <p>Only admins should see this!</p>
   } -->
   <!-- <p *ngIf="isAdmin()">Only admins should see this!</p> -->
-  <!-- <ng-template appAuth="admin">
+   <!-- ng-template perdoret per si nje feature ne html kur boolean eshte true ajo shfaq vlerat brenda saj, kurse eshte flase ajo nuk i shfaq  -->
+  <!-- <ng-template appAuth="admin"> 
     <p>Only admins should see this!</p>
   </ng-template> -->
+
   <p *appAuth="'admin'" appLog class="protected-content admin">
     Only admins should see this!
   </p>
@@ -21,4 +21,6 @@
   <p *appAuth="'guest'" class="protected-content authenticated">
     Guest users should see this!
   </p>
+
 </main>
+

code-snapshots/07-directives-deep-dive/05-hostdirectives/src/app/app.component.ts

@@ -25,3 +25,4 @@ export class AppComponent {
 
   isAdmin = computed(() => this.authService.activePermission() === 'admin');
 }
+

code-snapshots/07-directives-deep-dive/05-hostdirectives/src/app/auth/auth.directive.ts

@@ -10,22 +10,45 @@ import {
 import { Permission } from './auth.model';
 import { AuthService } from './auth.service';
 
-@Directive({
-  selector: '[appAuth]',
+@Directive({ 
+  selector: '[appAuth]',// perfaqeson *appAuth="'admin'" - *appAuth="'user'" - *appAuth="'guest'"
   standalone: true
 })
 export class AuthDirective {
+
+  // input mer vlerat nga: *appAuth="'admin'" - *appAuth="'user'" - *appAuth="'guest'" ne app.component.html
   userType = input.required<Permission>({ alias: 'appAuth' });
+
   private authService = inject(AuthService);
-  private templateRef = inject(TemplateRef);
-  private viewContainerRef = inject(ViewContainerRef);
+
+  // perfaqeson <ng-template /> ne html ku i jep akses DOM te mos i shfaq ne browser: <p /> *appAuth="'admin'" - *appAuth="'user'" - *appAuth="'guest'"
+  private templateRef = inject(TemplateRef); 
+
+  // i jep akses TemplateRef ose <ng-template /> nga DOM te shfaq nje nga tre kushtet: <p /> *appAuth="'admin'" - *appAuth="'user'" - *appAuth="'guest'"
+  private viewContainerRef = inject(ViewContainerRef); 
 
   constructor() {
-    effect(() => {
+    // The effect function to reactively update the view whenever the user's role changes.
+    effect(() => { 
+
+      // - TemplateRef is a reference to a chunk of template code that can be instantiated but is 
+      // not yet attached to the DOM.
+
+      // - ViewContainerRef is a container that allows you to dynamically insert or remove views 
+      // created from TemplateRef into the DOM.
+
+      // - Internally, Angular uses these objects to efficiently manage dynamic content, ensuring 
+      // that only the necessary parts of the DOM are updated and rendered based on the application state.
+
       if (this.authService.activePermission() === this.userType()) {
-        this.viewContainerRef.createEmbeddedView(this.templateRef);
+
+        // Angular manages the change detection and lifecycle of this view.
+        this.viewContainerRef.createEmbeddedView(this.templateRef); // viewContainerRef i jep akese DOM te shfaqi TemplateRef ose <ng-template /> ku do qofte ai
+
       } else {
-        this.viewContainerRef.clear();
+        // Removes all views that were added to the ViewContainerRef, cleaning up the DOM and 
+        // removing the corresponding elements.
+        this.viewContainerRef.clear();// dhe kjo ketu fshim cdo lloj aksesi qe vlerat brena tre kushteve te behen false, mos te shfaqen.
       }
     });
   }

code-snapshots/07-directives-deep-dive/05-hostdirectives/src/app/auth/auth.service.ts

@@ -9,11 +9,17 @@ export class AuthService {
   activePermission = signal<Permission>('guest');
 
   authenticate(email: string, password: string) {
+
     console.log(email, password);
+
     if (email === '[email protected]' && password === 'admin') {
+
       this.activePermission.set('admin');
+
     } else if (email === '[email protected]' && password === 'user') {
+
       this.activePermission.set('user');
+
     } else {
       this.activePermission.set('guest');
     }
@@ -23,3 +29,4 @@ export class AuthService {
     this.activePermission.set('guest');
   }
 }
+

code-snapshots/07-directives-deep-dive/05-hostdirectives/src/app/learning-resources/learning-resources.component.html

@@ -18,3 +18,4 @@ <h2>Learning Resources</h2>
     <a href="https://www.google.com/search?q=angular">Google</a>
   </li>
 </ul>
+

code-snapshots/07-directives-deep-dive/05-hostdirectives/src/app/learning-resources/learning-resources.component.ts

@@ -11,3 +11,4 @@ import { LogDirective } from '../log.directive';
   imports: [SafeLinkDirective, LogDirective]
 })
 export class LearningResourcesComponent {}
+

code-snapshots/07-directives-deep-dive/05-hostdirectives/src/app/log.directive.ts

@@ -11,7 +11,7 @@ export class LogDirective {
   private elementRef = inject(ElementRef);
 
   onLog() {
-    console.log('CLICKED');
-    console.log(this.elementRef.nativeElement);
+    console.log('CLICKED ->',this.elementRef.nativeElement);
   }
 }
+

code-snapshots/07-directives-deep-dive/05-hostdirectives/src/app/safe-link.directive.ts

@@ -1,32 +1,43 @@
 import { Directive, ElementRef, inject, input } from '@angular/core';
 import { LogDirective } from './log.directive';
 
-@Directive({
+// The @Directive is used to create a custom attribute directive in Angular. In your case, 
+// the SafeLinkDirective is applied as an attribute to an HTML element, specifically an 
+// anchor (<a>) element.
+
+@Directive({ // Directive perfaqeson ->  <a href="https://angular.dev" appSafeLink="myapp-docs-link">Angular Documentation</a>
   selector: 'a[appSafeLink]',
   standalone: true,
-  host: {
-    '(click)': 'onConfirmLeavePage($event)'
+  host: { // pra host ne vetvete perfaqeson Directive ne teresi qe eshte <a /> dhe kur e shtypim ate na drejton te funksjoni: onConfirmLeavePage(event: MouseEvent)
+    '(click)': 'onConfirmLeavePage($event)' // click perfaqeson -> href="https://angular.dev"
   },
   hostDirectives: [LogDirective]
 })
 export class SafeLinkDirective {
-  queryParam = input('myapp', { alias: 'appSafeLink' });
+
+  queryParam = input('myapp', { alias: 'appSafeLink' }); // marim string nga appSafeLink="myapp-docs-link" ose appSafeLink="myapp-courses-link" kur e shtypim link
+
   private hostElementRef = inject<ElementRef<HTMLAnchorElement>>(ElementRef);
 
-  constructor() {
+  constructor() { 
     console.log('SafeLinkDirective is active!');
   }
 
   onConfirmLeavePage(event: MouseEvent) {
-    const wantsToLeave = window.confirm('Do you want to leave the app?');
 
-    if (wantsToLeave) {
-      const address = this.hostElementRef.nativeElement.href;
-      this.hostElementRef.nativeElement.href =
-        address + '?from=' + this.queryParam();
+    const wantsToLeave = window.confirm('Do you want to leave the app?'); // na paraqet nje djalog per te ndryshuar faqe i cili eshte nje boolean
+
+    if (wantsToLeave) { // nese shtypim butonin ok - true, kodi lexon funksjonet ku jemi duke modifikuar href e <a />
+      const address = this.hostElementRef.nativeElement.href; // kjo perfaqeson href e <a/>
+
+      // kurse this.queryParam() perfaqeson -> myapp-docs-link ose myapp-courses-link
+      this.hostElementRef.nativeElement.href = address + '?from=' + this.queryParam(); 
+
+      // dhe return https://angular.dev/?from=myapp-docs-link ose https://academind.com/courses?from=myapp-courses-link
       return;
     }
 
-    event.preventDefault();
+    event.preventDefault(); // if flase - cancle qendrojme ne faqen qe jemi.
   }
 }
+