AmirTugi

body {
  padding: 20px;
  font-family: Halvetica, sans-serif;
  
  .title {
    margin-bottom: 4px;
  }
  
  .created-at {
    font-size: 14px;

AmirTugi

// Use !{var} to use unescaped conent
style(type="text/css") !{compiledStyle}

h1.title Invoice number ##{invoice.id}

p.created-at #{invoice.createdAt}

h3 For: #{invoice.customer.number}

table

AmirTugi

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngIf="isLoading" class="is-loading"><mat-spinner diameter="50"></mat-spinner></mat-option>
  <ng-container *ngIf="!isLoading">
    <mat-option *ngFor="let user of filteredUsers" [value]="user">
      <span>{{ user.name }}</span>
      <small> | ID: {{user.id}}</small>
    </mat-option>
  </ng-container>
</mat-autocomplete>

AmirTugi

this.usersForm = this.fb.group({
  userInput: null
})

this.usersForm
  .get('userInput')
  .valueChanges
  .pipe(
    debounceTime(300),
    tap(() => this.isLoading = true),

AmirTugi

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngFor="let user of (filteredUsers | async)?.results" [value]="user">
    <span>{{ user.name }}</span>
    <small> | ID: {{user.id}}</small>
  </mat-option>
</mat-autocomplete>

AmirTugi

this.usersForm = this.fb.group({
  userInput: null
})

this.filteredUsers = this.usersForm
  .get('userInput')
  .valueChanges
  .pipe(
    debounceTime(300),
    switchMap(value => this.appService.search({name: value}, 1))

AmirTugi

import { Component, Output, EventEmitter, OnInit, AfterContentInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { User } from '../users/user.class';

@Component({
  selector: 'shipping-form',
  templateUrl: './shipping.component.html',
  styleUrls: [ './shipping.component.scss' ]
})
export class ShippingFormComponent implements OnChanges, OnInit {

AmirTugi

<div class="mat-typography">
  <h1>Checkout Order</h1>

  <div class="checkout-form">
    <form novalidate [formGroup]="checkoutForm">
      <mat-form-field>
        <input matInput type="text" placeholder='Full name' formControlName="fullName">
      </mat-form-field>

      <mat-tab-group>

AmirTugi

import { Component, OnInit } from '@angular/core';
import {FormGroup, FormBuilder} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})
export class AppComponent implements OnInit {
  checkoutForm: FormGroup;

AmirTugi

import { Component, Output, EventEmitter, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'shipping-form',
  templateUrl: './shipping.component.html',
  styleUrls: [ './shipping.component.scss' ]
})
export class ShippingFormComponent  {
  @Output() formReady = new EventEmitter<FormGroup>()