[Angular mosaic 4] Fill select/options (FormsModule, ngModel, ngModelChange, ngValue, http.get Json from Assets, LocalStorage), Angular connection service (Enable/Disable Heartbeat, Heartbeat URL, Heartbeat Interval/RetryInterval).
- 1. My fast style (background, NAV menu, header) for my various technical sites.
- 2. Intercept and analyzing routing events (router-outlet onActivate event).
- 3. Pass parameters from one component to another (@Input, extends base page).
- 4. Simplest shared service (@Injectable, Subject, Injectable, LocalStorage, Store).
- 5. UIkit Modal Futures (uk-modal tag, Modal from routed page and from Menu, Modal Toggle, Modal Show, Bind by On, MouseOver Modal, Modal Alert, Modal Prompt, Close button).
- 6. Standard Interceptor and JWT injector, Login page, Auth service, and Base form with FormGroup.
- 7. Fill select/options (FormsModule, ngModel, ngModelChange, ngValue, http.get Json from Assets, LocalStorage)
- 8. Angular connection service (Enable/Disable Heartbeat, Heartbeat URL, Heartbeat Interval/RetryInterval)
- 9. [Angular mosaic 5] Net Core SignalR Client (ReactiveX/rxjs, Configure Angular injector, Abstract class, Inject SignalR service, Configure SignalR hub - forbid Negotiation, setUp Transport, URL, LogLevel, Anon or AU socket connection), Configure server Hub (MapHub endpoint, WithOrigins on CORS-policy, LogLevel, JWT AU)
7. Fill select/options (FormsModule, ngModel, ngModelChange, ngValue, http.get Json from Assets, LocalStorage)
This code read JSON from Assets
![](/AngularMosaic3/Json-1_1.png)
Fill Select/Options HTML element
![](/AngularMosaic3/Fill-2_1.png)
And set up selected value to LocalStorage.
![](/AngularMosaic3/Fill-1_1.png)
1: import { Component } from '@angular/core';
2: import { ActivatedRoute, Router } from '@angular/router';
3: import { SharedService } from '../shared.service';
4: import { AuthService } from '../interceptor/auth.service';
5: import { HttpClient } from '@angular/common/http';
6: import { Registry$GetRegistryImageList$item } from '../../assets/api/registry/Registry_GetRegistryImageList.Interface'
7:
8: import * as $ from 'jquery'
9: declare var UIkit: any;
10:
11: @Component({
12: selector: 'app-create-container1',
13: templateUrl: './create-container1.component.html',
14: styleUrls: ['./create-container1.component.css']
15: })
16: export class CreateContainer1Component {
17:
18:
19: public registry$GetRegistryImageList$item!: Registry$GetRegistryImageList$item;
20: public registry$GetRegistryImageList: Registry$GetRegistryImageList$item[] = [];
21:
22: constructor(
23: private activatedRoute: ActivatedRoute,
24: private router: Router,
25: private sharedService: SharedService,
26: private authService: AuthService,
27: private http: HttpClient
28: ) {
29: console.log("CreateContainer1-constructor");
30:
31: this.http.get<Registry$GetRegistryImageList$item[]>('../assets/api/registry/Registry_GetRegistryImageList.Response.json',
32: { responseType: 'json' }).subscribe(x=> {
33: console.log("/Registry/GetRegistryImageList");
34: console.log(x);
35: this.registry$GetRegistryImageList=x;
36: console.log(JSON.stringify(this.registry$GetRegistryImageList));
37: });
38:
39: if (!sharedService.isAuthenticated()) {
40: this.router.navigate(["/"]);
41: }
42: }
43:
44: changeImage(e:number){
45: localStorage.setItem("CreateContainer1", JSON.stringify(this.registry$GetRegistryImageList[e-1]));
46: };
47:
48: close() {
49: console.log("CreateContainer1-close");
50: this.router.navigate(["/"]);
51: }
52:
53: ToStep2(): void {
54: UIkit.modal("#createContainer2").show();
55: }
56:
57: }
1: <div class="uk-form-row">
2: <select class="uk-select" style="width: 100%; cursor: pointer;"
3: (ngModelChange)="changeImage(registry$GetRegistryImageList$item.i)"
4: [(ngModel)]="registry$GetRegistryImageList$item">
5: <option selected="true">-please select-</option>
6: <option *ngFor="let registry$GetRegistryImageList$item of registry$GetRegistryImageList"
7: [ngValue]="registry$GetRegistryImageList$item.i">
8: {{registry$GetRegistryImageList$item.name}}
9: (registry {{registry$GetRegistryImageList$item.toDockerRegistry}},
10: created {{registry$GetRegistryImageList$item.lastUpdate}})
11: </option>
12: <option>-require new-</option>
13: </select>
14: </div>
To use this future need to import FormsModule
![](/AngularMosaic3/Import-1_1.png)
8. Angular connection service (Enable/Disable Heartbeat, Heartbeat URL, Heartbeat Interval/RetryInterval)
I have add to my frontend important service to check access to backend. Another goal is to add to this service to check is user virtual machine still alive?
![](/AngularMosaic3/ConnectionService-1_1.png)
![](/AngularMosaic3/ConnectionService-2_1.png)
![](/AngularMosaic3/ConnectionService-3_1.png)
Idea of this service is periodically ping backend (or user virtual machine).
![](/AngularMosaic3/Ping-1_1.png)
If backend or user VM is not available, warning is showing, in the screen below I simple change Backend URL to Google and warning disapear.
![](/AngularMosaic3/Warning-1_1.png)
![](/AngularMosaic3/Warning-2_1.png)
Realization is very simple, firstly need to add this service to list of module.
![](/AngularMosaic3/ConnectionService-4_1.png)
![](/AngularMosaic3/ConnectionService-7_1.png)
Than we need to create function IsOnline() and show warning depends of this function.
![](/AngularMosaic3/ConnectionService-5_1.png)
![](/AngularMosaic3/ConnectionService-6_1.png)
- (2024) Google Cloud and Cloudflare
- (2023) CloudflareWorker and Supabase
- (2022) JS, Css
- (2022) Typescript, Webpack
- (2022) Angular, RxJs, Firebase, MongoDb
- (2022) Node, NestJs, Electron, Pwa, Telegram
- (2022) React, Redux, GraphQL, NextJs
- (2022) Angular/Typescript, JS books
Comments (
)
![](http://forum.vb-net.com/GetTopicCount.png?id=47024b1a-2088-4ce8-b433-11639fd20b58)
<00>
<01>
<02>
<03>
<04>
<05>
<06>
<07>
<08>
<09>
<10>
<11>
<12>
<13>
<14>
<15>
<16>
<17>
<18>
<19>
<20>
<21>
<22>
<23>
Link to this page:
http://www.vb-net.com/AngularMosaic3/Index.htm
<SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |