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 bug-cd

Browse Source
This commit is contained in:
thomas
2023-10-18 09:58:17 +02:00
parent a4edf05eac
commit db75a7bb7e
35 changed files with 43 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/angular/bug-cd/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,21 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
standalone: true,
imports: [RouterOutlet],
selector: 'app-root',
template: `
<h1 class="text-xl px-4 py-2">My Application</h1>
<section class="flex">
<router-outlet name="side" />
<div class="border p-4">
<router-outlet />
</div>
</section>
`,
host: {
class: 'flex flex-col gap-2',
},
})
export class AppComponent {}

30
apps/angular/bug-cd/src/app/app.config.ts Normal file
View File

@@ -0,0 +1,30 @@
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { BarComponent } from './bar.component';
import { FooComponent } from './foo.component';
import { MainNavigationComponent } from './main-navigation.component';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter([
{
path: '',
component: MainNavigationComponent,
outlet: 'side',
},
{
path: '',
pathMatch: 'full',
redirectTo: 'foo',
},
{
path: 'foo',
component: FooComponent,
},
{
path: 'bar',
component: BarComponent,
},
]),
],
};

7
apps/angular/bug-cd/src/app/bar.component.ts Normal file
View File

@@ -0,0 +1,7 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-bar',
standalone: true,
template: ` BarComponent `,
})
export class BarComponent {}

7
apps/angular/bug-cd/src/app/fake.service.ts Normal file
View File

@@ -0,0 +1,7 @@
import { Injectable } from '@angular/core';
import { delay, of } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class FakeServiceService {
getInfoFromBackend = () => of('Client app').pipe(delay(500));
}

7
apps/angular/bug-cd/src/app/foo.component.ts Normal file
View File

@@ -0,0 +1,7 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-foo',
standalone: true,
template: `Foo Component `,
})
export class FooComponent {}

67
apps/angular/bug-cd/src/app/main-navigation.component.ts Normal file
View File

@@ -0,0 +1,67 @@
import { AsyncPipe, NgFor, NgIf } from '@angular/common';
import { Component, Input, inject } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { FakeServiceService } from './fake.service';
interface MenuItem {
path: string;
name: string;
}
@Component({
selector: 'app-nav',
standalone: true,
imports: [RouterLink, RouterLinkActive, NgFor],
template: `
<ng-container *ngFor="let menu of menus">
<a
class="border px-4 py-2 rounded-md"
[routerLink]="menu.path"
routerLinkActive="isSelected">
{{ menu.name }}
</a>
</ng-container>
`,
styles: [
`
a.isSelected {
@apply bg-gray-600 text-white;
}
`,
],
host: {
class: 'flex flex-col p-2 gap-2',
},
})
export class NavigationComponent {
@Input() menus!: MenuItem[];
}
@Component({
standalone: true,
imports: [NavigationComponent, NgIf, AsyncPipe],
template: `
<ng-container *ngIf="info$ | async as info">
<ng-container *ngIf="info !== null; else noInfo">
<app-nav [menus]="getMenu(info)" />
</ng-container>
</ng-container>
<ng-template #noInfo>
<app-nav [menus]="getMenu('')" />
</ng-template>
`,
host: {},
})
export class MainNavigationComponent {
private fakeBackend = inject(FakeServiceService);
readonly info$ = this.fakeBackend.getInfoFromBackend();
getMenu(prop: string) {
return [
{ path: '/foo', name: `Foo ${prop}` },
{ path: '/bar', name: `Bar ${prop}` },
];
}
}

0
apps/angular/bug-cd/src/assets/.gitkeep Normal file
View File

BIN
apps/angular/bug-cd/src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

13
apps/angular/bug-cd/src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</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/bug-cd/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)
);

5
apps/angular/bug-cd/src/styles.scss Normal file
View File

@@ -0,0 +1,5 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* You can add global styles to this file, and also import other style files */

2
apps/angular/bug-cd/src/test-setup.ts Normal file
View File

@@ -0,0 +1,2 @@
import '@testing-library/jest-dom';
import 'jest-preset-angular/setup-jest';