vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 21:03:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(doc): move reouter'input

Browse Source
This commit is contained in:
thomas
2023-10-18 10:04:26 +02:00
parent 01a41ed13f
commit a0844c8a42
16 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/angular/router-input/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,24 @@
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { RouterLink, RouterModule } from '@angular/router';
@Component({
standalone: true,
imports: [RouterLink, RouterModule, ReactiveFormsModule],
selector: 'app-root',
template: ` <label for="userName">UserName</label>
<input id="userName" type="text" [formControl]="userName" />
<label for="testId">TestId</label>
<input id="testId" type="number" [formControl]="testId" />
<button
[routerLink]="'test/' + testId.value"
[queryParams]="{ user: userName.value }">
Test
</button>
<button routerLink="/">HOME</button>
<router-outlet></router-outlet>`,
})
export class AppComponent {
userName = new FormControl();
testId = new FormControl();
}

7
apps/angular/router-input/src/app/app.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(appRoutes)],
};

15
apps/angular/router-input/src/app/app.routes.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Route } from '@angular/router';
export const appRoutes: Route[] = [
{
path: '',
loadComponent: () => import('./home.component'),
},
{
path: 'test/:testId',
loadComponent: () => import('./test.component'),
data: {
permission: 'admin',
},
},
];

8
apps/angular/router-input/src/app/home.component.ts Normal file
View File

@@ -0,0 +1,8 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
standalone: true,
imports: [],
template: `<div>Home</div>`,
})
export default class HomeComponent {}

21
apps/angular/router-input/src/app/test.component.ts Normal file
View File

@@ -0,0 +1,21 @@
import { AsyncPipe } from '@angular/common';
import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs';
@Component({
selector: 'app-test',
standalone: true,
imports: [AsyncPipe],
template: `
<div>TestId: {{ testId$ | async }}</div>
<div>Permission: {{ permission$ | async }}</div>
<div>User: {{ user$ | async }}</div>
`,
})
export default class TestComponent {
private activatedRoute = inject(ActivatedRoute);
testId$ = this.activatedRoute.params.pipe(map((p) => p['testId']));
permission$ = this.activatedRoute.data.pipe(map((d) => d['permission']));
user$ = this.activatedRoute.queryParams.pipe(map((q) => q['user']));
}

0
apps/angular/router-input/src/assets/.gitkeep Normal file
View File

BIN
apps/angular/router-input/src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

13
apps/angular/router-input/src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>router-input</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>

7
apps/angular/router-input/src/main.ts Normal file
View File

@@ -0,0 +1,7 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
);

1
apps/angular/router-input/src/styles.scss Normal file
View File

@@ -0,0 +1 @@
/* You can add global styles to this file, and also import other style files */