Angular - DOM example

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

@Component({
  selector: 'app-root',
  template: `
    <div>{{user.id}}</div>
    <div>{{user.name}}</div>
    <div [ngClass]="{'teenager': user.age < 18}">
      {{user.age < 18 ? 'teenager' : 'adult'}}
    </div>
    <div
      [ngClass]="{
        'male': user.gender === 'M',
        'female': user.gender === 'F'
      }"
      [style.color]="user.gender === 'M' ? '#222' : 'white'"
      [style.border]="user.gender === 'M' ? null : '1px solid black'"
    >
      {{user.gender === 'M' ? 'male' : 'female'}}
    </div>

    <div>
      <img
        [src]="'https://maps.googleapis.com/maps/api/staticmap?center=' + user.city + '&zoom=' + zoomLevel + '&size=200x60&key=xxxxx'"
        alt="">
      <button (click)="zoomLevel = zoomLevel + 1">+</button>
      <button (click)="zoomLevel = zoomLevel - 1">-</button>
    </div>
    <div>{{user.birthday | date: 'dd MMMM yyyy @ hh:mm'}}</div>
    <div>{{user.bitcoins | number: '1.2-4'}}</div>

    <pre>{{user | json}}</pre>
  `,
  styles: [`
    .male {background-color: skyblue}
    .female {background-color: deeppink}
    .teenager {background-color: grey}
  `]
})
export class AppComponent {
  zoomLevel = 6;
  user = {
    id: 1,
    name: 'Fabio',
    age: 15,
    gender: 'M',
    city: 'Trieste',
    birthday: 1598910648000,
    bitcoins: 1.12341412412412
  };
}