Tohuwabohu excorcism

User Tools

Site Tools

Trace:
programming:angular

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
programming:angular [2023/08/29 07:03] – [Async patterns] skipidarprogramming:angular [2023/11/01 07:31] (current) – ↷ Page moved from camunda:programming:angular to programming:angular skipidar
Line 16: Line 16:
 == let == == let ==
  
-use '''let''' to declare variables. +use ''let'' to declare variables. 
-Dont use '''var''', it sometime doesnt respect the scope, like in for loops.+Dont use ''var'', it sometime doesnt respect the scope, like in for loops.
  
-Typescript resolves the conflicts between scopes on its own, when using '''let'''+Typescript resolves the conflicts between scopes on its own, when using ''let''
  
  
Line 163: Line 163:
  
 Watch changes in code and auto rebuild Watch changes in code and auto rebuild
 +<code>
 +ng build --watch --poll 500 --configuration development
 +</code>
 +
 +To check if any module in a project is 'old': ''npm outdated''.
 +
 +To update all dependencies, if you are confident this is desirable: ''npm update''.
 +
 +To update all dependencies, if you are confident this is desirable: ''npm update xml2js''.
 +
 +To update package.json version numbers, append the --save flag: ''npm update --save''.
 <code> <code>
 ng build --watch --poll 500 --configuration development ng build --watch --poll 500 --configuration development
Line 391: Line 402:
  
  
-TypeScript eliminates this boilerplate of using '''"this.make=make"''' by using +TypeScript eliminates this boilerplate of using ''"this.make=make"'' by using 
 accessors on the constructor parameters.  accessors on the constructor parameters. 
  
Line 761: Line 772:
 A new **component** "alf-component1" : A new **component** "alf-component1" :
  
-'''app/alf-component1/alf-component1.component.spec.ts'''+''app/alf-component1/alf-component1.component.spec.ts''
 <sxh ts> <sxh ts>
 import {Component, Input} from '@angular/core'; import {Component, Input} from '@angular/core';
Line 783: Line 794:
 Because a field "name" exists in component - I can use it in the template: Because a field "name" exists in component - I can use it in the template:
  
-'''app/alf-component1/alf-component1.component.html'''+''app/alf-component1/alf-component1.component.html''
  
 <sxh ts> <sxh ts>
Line 792: Line 803:
  
  
-'''app/app.component.ts'''+''app/app.component.ts''
  
 Define a "title" field. Define a "title" field.
Line 814: Line 825:
 And I bind the title field of root component to it. And I bind the title field of root component to it.
  
-'''app/app.component.spec.ts'''+''app/app.component.spec.ts''
 <sxh ts> <sxh ts>
     <app-alf-component1 [name]="title"></app-alf-component1>     <app-alf-component1 [name]="title"></app-alf-component1>
Line 825: Line 836:
 A new **component** "alf-component1" : A new **component** "alf-component1" :
  
-'''app/alf-component1/alf-component1.component.spec.ts'''+''app/alf-component1/alf-component1.component.spec.ts''
 <sxh ts> <sxh ts>
 import {Component, Input} from '@angular/core'; import {Component, Input} from '@angular/core';
Line 846: Line 857:
 Because a field "liked" exists in component - I can use to emit events: Because a field "liked" exists in component - I can use to emit events:
  
-'''app/alf-component1/alf-component1.component.html'''+''app/alf-component1/alf-component1.component.html''
  
 <sxh html> <sxh html>
Line 875: Line 886:
 And I bind the ''onLiked()'' method of root component to those events. And I bind the ''onLiked()'' method of root component to those events.
  
-'''app/app.component.spec.ts'''+''app/app.component.spec.ts''
 <sxh ts> <sxh ts>
     <app-alf-component1 (liked)="onLike($event:boolean)"></app-alf-component1>     <app-alf-component1 (liked)="onLike($event:boolean)"></app-alf-component1>
Line 1166: Line 1177:
 The component stub can be generated. The component stub can be generated.
  
-Also under a "NGModule", in a subfolder. Here component '''heroList''' under module and subfolder '''heroes'''.+Also under a "NGModule", in a subfolder. Here component ''heroList'' under module and subfolder ''heroes''.
  
  
Line 1553: Line 1564:
  
  
 +== Observers ==
 +
 +
 +
 +<sxh ts>
 +
 +// triggers every 2 sec his observables
 +title$ = new Observable(observer => {
 +  setInterval(() => {
 +    observer.next();
 +  }, 2000);
 +});
 +
 +
 +private setTitle = () => {
 +  const timestamp = new Date().getMilliseconds();
 +  this.title = `Hello Angular 10 (${timestamp})`;
 +}
 +
 +constructor() {
 +  this.title$.subscribe(this.setTitle);
 +}
 +</sxh>
programming/angular.1693292592.txt.gz · Last modified: by skipidar