feat: 🎨 add 02 advanced component

hbweb · hbweb · commit af2eb344f423 · 2023-09-19T18:12:59.000+07:00
diff --git a/src/app/topics/01-architecture/architecture/architecture.component.scss b/src/app/topics/01-architecture/architecture/architecture.component.scss
diff --git a/src/app/topics/01-architecture/architecture/architecture.component.spec.ts b/src/app/topics/01-architecture/architecture/architecture.component.spec.ts
diff --git a/src/app/topics/01-architecture/architecture/architecture.component.ts b/src/app/topics/01-architecture/architecture/architecture.component.ts
@@ -3,8 +3,7 @@ import { TopicCard } from 'src/app/shared/models';
 
 @Component({
   selector: 'app-architecture',
-  templateUrl: './architecture.component.html',
-  styleUrls: ['./architecture.component.scss']
+  templateUrl: './architecture.component.html'
 })
 export class ArchitectureComponent {
 
diff --git a/src/app/topics/01-architecture/architecture/architecture.module.ts b/src/app/topics/01-architecture/architecture/architecture.module.ts
@@ -15,7 +15,6 @@ const routes: Routes = [
   declarations: [ArchitectureComponent],
   imports: [
     RouterModule.forChild(routes),
-    CommonModule,
     SharedComponentsModule
   ]
 })
diff --git a/src/app/topics/02-advanced-component/advanced-component.module.ts b/src/app/topics/02-advanced-component/advanced-component.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { SharedComponentsModule } from 'src/app/shared/components/shared-components.module';
+import { AdvancedComponent } from './advanced.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AdvancedComponent
+  }
+];
+
+@NgModule({
+  declarations: [AdvancedComponent],
+  imports: [
+    RouterModule.forChild(routes),
+    SharedComponentsModule
+  ]
+})
+export class AdvancedComponentModule { }
diff --git a/src/app/topics/02-advanced-component/advanced.component.html b/src/app/topics/02-advanced-component/advanced.component.html
@@ -0,0 +1,10 @@
+<div class="md:w-1/2">
+  <h1 class="mb-2 text-1xl font-bold text-gray-800 md:text-3xl">
+    Advanced Components
+  </h1>
+
+  <p class="pb-8">A few topics to cover in this area:</p>
+
+  <app-topic-card [topicCards]="topicCards"></app-topic-card>
+
+</div>
diff --git a/src/app/topics/02-advanced-component/advanced.component.ts b/src/app/topics/02-advanced-component/advanced.component.ts
@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TopicCard } from 'src/app/shared/models';
+
+@Component({
+  selector: '',
+  templateUrl: './advanced.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AdvancedComponent {
+
+  public topicCards: TopicCard[] = [
+    {title: 'Content projection', url: ''},
+    {title: 'Custom two-way data bindings', url: ''},
+    {title: 'ng-template and ng-container', url: ''},
+    {title: 'Sanitization of HTML content', url: ''},
+  ];
+}
diff --git a/src/app/topics/02-advanced-component/index.ts b/src/app/topics/02-advanced-component/index.ts
@@ -0,0 +1 @@
+export * from './advanced-component.module';
diff --git a/src/app/topics/topic-listing/topic-listing.module.ts b/src/app/topics/topic-listing/topic-listing.module.ts
@@ -15,6 +15,11 @@ const routes: Routes = [
     loadChildren: () => import('../01-architecture/architecture/architecture.module').then(m => m.ArchitectureModule)
   },
 
+  {
+    path: 'component',
+    loadChildren: () => import('../02-advanced-component/advanced-component.module').then(m => m.AdvancedComponentModule)
+  },
+
 ];
 
 @NgModule({

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,6 @@ const routes: Routes = [`
`15`	`15`	`declarations: [ArchitectureComponent],`
`16`	`16`	`imports: [`
`17`	`17`	`RouterModule.forChild(routes),`
`18`		`- CommonModule,`
`19`	`18`	`SharedComponentsModule`
`20`	`19`	`]`
`21`	`20`	`})`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export * from './advanced-component.module';`