bitbank LT Night #3 Angularの資料

3. 👇

8. 🎉
🎉

9. 🎉
🎉

14. 😇

25. userInfo: any = {};
ticker: any[] = [];

26. userInfo: UserInfo | null = null;
ticker: Ticker[] = [];

30. const observableData$ = of(3);
const observableDataWithParam$ = (param: number) => of(10 * param);
observableData$.subscribe((res) => {
observableDataWithParam$(res).subscribe((data) => {
console.log(data);
})
});

31. const observableData$ = of(3);
const observableDataWithParam$ = (param: number) => of(10 * param);
observableData$.pipe(
mergeMap(res) => observableDataWithParam(res)),
).subscribe((data) => {
console.log(data);
});

32. const observableData$ = of(3);
const observableData2$ = of(5).pipe(delay(2000));
const observableDataWithParam$ = (param: number) => of(10 * param);
observableData$.pipe(
mergeMap((res) => observableData2$.pipe(
mergeMap((res2) => observableDataWithParam$(res + res2))
)),
).subscribe((data) => console.log(data));

33. const observableData$ = of(3);
const observableData2$ = of(5).pipe(delay(2000));
const observableDataWithParam$ = (param: number) => of(10 * param);
combineLatest(observableData$, observableData2).pipe(
mergeMap(([res, res2]) => observableDataWithParam$(res + res2))
).subscribe((data) => console.log(data));

34. <div>
<p>{{ (userInfo$ | async).id }}</p>
<p>{{ (userInfo$ | async).name }}</p>
<p>{{ (userInfo$ | async).age }}</p>
</div>

35. <div *ngIF=”userInfo$ | async as userInfo”>
<p>{{ userInfo.id }}</p>
<p>{{ userInfo.name }}</p>
<p>{{ userInfo.age }}</p>
</div>