Advertisement
fabiobiondi

Angular - DOM example

Sep 30th, 2020
2,181
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { Component } from '@angular/core';
  2.  
  3. @Component({
  4.   selector: 'app-root',
  5.   template: `
  6.     <div>{{user.id}}</div>
  7.     <div>{{user.name}}</div>
  8.     <div [ngClass]="{'teenager': user.age < 18}">
  9.       {{user.age < 18 ? 'teenager' : 'adult'}}
  10.     </div>
  11.     <div
  12.      [ngClass]="{
  13.        'male': user.gender === 'M',
  14.        'female': user.gender === 'F'
  15.      }"
  16.      [style.color]="user.gender === 'M' ? '#222' : 'white'"
  17.      [style.border]="user.gender === 'M' ? null : '1px solid black'"
  18.    >
  19.       {{user.gender === 'M' ? 'male' : 'female'}}
  20.     </div>
  21.  
  22.     <div>
  23.       <img
  24.         [src]="'https://maps.googleapis.com/maps/api/staticmap?center=' + user.city + '&zoom=' + zoomLevel + '&size=200x60&key=xxxxx'"
  25.         alt="">
  26.       <button (click)="zoomLevel = zoomLevel + 1">+</button>
  27.       <button (click)="zoomLevel = zoomLevel - 1">-</button>
  28.     </div>
  29.     <div>{{user.birthday | date: 'dd MMMM yyyy @ hh:mm'}}</div>
  30.     <div>{{user.bitcoins | number: '1.2-4'}}</div>
  31.  
  32.     <pre>{{user | json}}</pre>
  33.   `,
  34.   styles: [`
  35.     .male {background-color: skyblue}  
  36.     .female {background-color: deeppink}
  37.     .teenager {background-color: grey}
  38.   `]
  39. })
  40. export class AppComponent {
  41.   zoomLevel = 6;
  42.   user = {
  43.     id: 1,
  44.     name: 'Fabio',
  45.     age: 15,
  46.     gender: 'M',
  47.     city: 'Trieste',
  48.     birthday: 1598910648000,
  49.     bitcoins: 1.12341412412412
  50.   };
  51. }
  52.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement