Angular Core Deep Dive Course

Author: Your Name

package-lock.json

@@ -29,7 +29,7 @@
     "express": "^4.16.3",
     "rxjs": "^6.3.3",
     "zone.js": "~0.8.26",
-    "document-register-element": "^1.7.2"
+    "document-register-element": "1.8.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.10.0",

package.json

@@ -1,9 +1,11 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, Inject, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, Inject, Injector, OnInit} from '@angular/core';
 import {Course} from './model/course';
 import {Observable} from 'rxjs';
 import {AppConfig, CONFIG_TOKEN} from './config';
 import {COURSES} from '../db-data';
 import {CoursesService} from './courses/courses.service';
+import {createCustomElement} from '@angular/elements';
+import {CourseTitleComponent} from './course-title/course-title.component';
 
 
 @Component({
@@ -19,13 +21,16 @@ export class AppComponent implements OnInit {
 
     constructor(
         private coursesService: CoursesService,
-        @Inject(CONFIG_TOKEN) private config: AppConfig) {
+        @Inject(CONFIG_TOKEN) private config: AppConfig,
+        private injector: Injector) {
 
     }
 
     ngOnInit() {
 
-        const htmlElement = createCustomElement();
+        const htmlElement = createCustomElement(CourseTitleComponent, {injector:this.injector});
+
+        customElements.define('course-title', htmlElement);
 
     }
 

src/app/app.component.ts

@@ -1,24 +1,27 @@
-import{ BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {AppComponent} from './app.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {HttpClientModule} from '@angular/common/http';
 import {CoursesModule} from './courses/courses.module';
-import { CourseTitleComponent } from './course-title/course-title.component';
+import {CourseTitleComponent} from './course-title/course-title.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    CourseTitleComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
-    CoursesModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+    declarations: [
+        AppComponent,
+        CourseTitleComponent
+    ],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        HttpClientModule,
+        CoursesModule
+    ],
+    providers: [],
+    bootstrap: [AppComponent],
+    entryComponents: [CourseTitleComponent]
 })
-export class AppModule { }
+export class AppModule {
+
+}

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, CUSTOM_ELEMENTS_SCHEMA, Input, OnInit} from '@angular/core';
 
 @Component({
   selector: 'course-title',

src/app/course-title/course-title.component.ts

@@ -1,7 +1,9 @@
 <div class="course-card" *ngIf="course" #container>
 
   <div class="course-title">
-    {{ cardIndex || '' + ' ' + course.description }}
+
+      {{ cardIndex || '' + ' ' + course.description }}
+
   </div>
 
   <ng-content select="course-image"

src/app/courses/course-card/course-card.component.html

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {CourseCardComponent} from './course-card/course-card.component';
 import {CourseImageComponent} from './course-image/course-image.component';
@@ -7,6 +7,7 @@ import {HighlightedDirective} from './directives/highlighted.directive';
 import {NgxUnlessDirective} from './directives/ngx-unless.directive';
 import {HttpClientModule} from '@angular/common/http';
 import {FilterByCategoryPipe} from './filter-by-category.pipe';
+import {CourseTitleComponent} from '../course-title/course-title.component';
 
 @NgModule({
   imports: [
@@ -24,6 +25,7 @@ import {FilterByCategoryPipe} from './filter-by-category.pipe';
         CourseImageComponent,
         FilterByCategoryPipe
     ],
-    providers: [CoursesService]
+    providers: [CoursesService],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class CoursesModule { }