jhades

<div [formGroup]="form">

    <input placeholder="Course title" formControlName="title">
  
    <input type="checkbox" placeholder="Free course" formControlName="free">

    <textarea placeholder="Description" formControlName="longDescription">

    </textarea>
      

jhades

User Login Form:
<form [formGroup]="form">

    <input matInput type="email" name="email"
           placeholder="Email" formControlName="email">

    <input matInput type="password"
           placeholder="Password" formControlName="password">

  <button [disabled]="!form.valid">

jhades

@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {

    constructor(private http: HttpClient) {}

    ngOnInit() {

jhades

const http$ : Observable<Course[]> = this.http.get('/api/courses');

http$
    .pipe(
        tap(() => console.log('HTTP request executed')),
        map(res => Object.values(res['payload']))
    )
    .subscribe(
        courses => console.log("courses", courses)

jhades

export interface Course {
    id:number;
    description:string;
    iconUrl?: string;
    courseListIcon?: string;
    longDescription?: string;
    category:string;
    seqNo: number;
    lessonsCount?:number;

jhades

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        ....
        StoreModule.forRoot(reducers, { metaReducers }),
           !environment.production ? StoreDevtoolsModule.instrument() : []
    ],

jhades

<h2>Choose Brand Colors:</h2>

<color-sample [color]="primary" #primaryColorSample>
</color-sample>

<mat-input-container>
  <mat-label>Primary Color</mat-label>
  <input matInput #primaryInput [(colorPicker)]="primary" [(ngModel)]="primary"/>
</mat-input-container>

jhades

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist-server",
    "main": "src/main.server.ts",
    "tsConfig": "src/tsconfig.server.json"
  }
}

jhades

{
  "publicKey":"BLBx-hf2WrL2qEa0qKb-aCJbcxEvyn62GDTyyP9KTS5K7ZL0K7TfmOKSPqp8vQF0DaG8hpSBknz_x3qf5F4iEFo",
  "privateKey":"PkVHOUKgY29NM7myQXXoGbp_bH_9j-cxW5cO-fGcSsA"
}

jhades

import {MatDialogModule} from "@angular/material";

@NgModule({
    declarations: [
        ...
        CourseDialogComponent
    ],
    imports: [
        ...