wh0th3h3llam1

export interface IDirtyControl {
	field: string,
	type: string,
	convertTo: string,
}

wh0th3h3llam1

...
<nz-alert nzType="error" [nzMessage]="nonFieldErrors" *ngIf="non_field_errors.length > 0" nzShowIcon>
	<ng-template #nonFieldErrors>
		<nz-list>
			<nz-list-item *ngFor="let error of non_field_errors">{{ error }}</nz-list-item>
		</nz-list>
	</ng-template>
</nz-alert>
...

wh0th3h3llam1

import { HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd/message';

@Injectable({
	providedIn: 'root'
})
export class ErrorService {

wh0th3h3llam1

<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">

	<nz-form-item>
		<nz-form-label [nzSpan]="9" nzRequired>Name</nz-form-label>
		<nz-form-control [nzSpan]="6" [nzErrorTip]="nameError">
			<input nz-input formControlName="name" placeholder="Name" />
		</nz-form-control>
		<ng-template #nameError let-control>
			<ng-container *ngIf="control.hasError('serverError')">
				{{ control.errors.serverError }}

wh0th3h3llam1

// Place your key bindings in this file to override the defaultsauto[]
[
	{
		"key": "ctrl+l ctrl+t",
		"command": "editor.action.transformToTitlecase"
	},
	{
		"key": "ctrl+l ctrl+l",
		"command": "editor.action.transformToLowercase"
	},

wh0th3h3llam1

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

import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { Router } from '@angular/router';

import { take } from 'rxjs/operators';
import { HttpErrorResponse } from '@angular/common/http';

import { ErrorService } from 'src/app/services/error.service';

wh0th3h3llam1

<div>
	<nz-breadcrumb [nzSeparator]="separatorTemplate">
		<nz-breadcrumb-item *ngFor="let breadcrumb of breadcrumbs">
			<ng-container *ngIf="breadcrumb.isClickable; else notClickable">
				<a [routerLink]="breadcrumb.url">
					<ng-container *ngIf="breadcrumb.icon; else noIcon">
						<i nz-icon [nzType]="breadcrumb.icon"></i>
					</ng-container>
					<ng-template #noIcon>
						<img [src]="breadcrumb.image" height="20px" width="20px" alt="" *ngIf="breadcrumb.image;">

wh0th3h3llam1

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { IBreadcrumb } from './breadcrumb.interfaces';

import { filter, distinctUntilChanged } from 'rxjs/operators';

@Component({
	selector: 'app-breadcrumb',
	templateUrl: './breadcrumb.component.html',
	styleUrls: ['./breadcrumb.component.css']

wh0th3h3llam1

export interface IBreadcrumb {
	icon: string,
	image: string,

	url: string,
	label: string,

	isClickable: boolean
}

wh0th3h3llam1

<div>
  <nz-breadcrumb>
    <nz-breadcrumb-item>
      <a routerLink="/">
        <i nz-icon nzType="home"></i>
      </a>
    </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <a routerLink="/university">
      <img src="assets/images/university_icon.svg" height="20px" width="20px" alt="">