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

feat(doc): move race-condition

Browse Source
This commit is contained in:
thomas
2023-10-18 09:53:41 +02:00
parent c0caace62f
commit 7cf675de60
26 changed files with 42 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/rxjs/race-condition/src/app/app.component.cy.ts Normal file
View File

@@ -0,0 +1,21 @@
import { TestBed } from '@angular/core/testing';
import { MatDialogModule } from '@angular/material/dialog';
import { AppComponent } from './app.component';
describe(AppComponent.name, () => {
beforeEach(() => {
TestBed.overrideComponent(AppComponent, {
add: {
imports: [MatDialogModule],
providers: [],
},
});
});
it('renders', () => {
cy.mount(AppComponent);
cy.get('button').click();
cy.get('ul li').should('have.length', '3');
});
});

38
apps/rxjs/race-condition/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,38 @@
import {
ChangeDetectionStrategy,
Component,
inject,
OnInit,
} from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { take } from 'rxjs';
import { TopicModalComponent } from './topic-dialog.component';
import { TopicService, TopicType } from './topic.service';
@Component({
standalone: true,
selector: 'app-root',
template: ` <button (click)="openTopicModal()">Open Topic</button> `,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnInit {
title = 'rxjs-race-condition';
dialog = inject(MatDialog);
topicService = inject(TopicService);
topics: TopicType[] = [];
ngOnInit(): void {
this.topicService
.fakeGetHttpTopic()
.pipe(take(1))
.subscribe((topics) => (this.topics = topics));
}
openTopicModal() {
this.dialog.open(TopicModalComponent, {
data: {
topics: this.topics,
},
});
}
}

6
apps/rxjs/race-condition/src/app/app.config.ts Normal file
View File

@@ -0,0 +1,6 @@
import { ApplicationConfig } from '@angular/core';
import { importProvidersFrom } from '@angular/core';
import { MatDialogModule } from '@angular/material/dialog';
export const appConfig: ApplicationConfig = {
providers: [importProvidersFrom(MatDialogModule)],
};

24
apps/rxjs/race-condition/src/app/topic-dialog.component.ts Normal file
View File

@@ -0,0 +1,24 @@
import { NgFor } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
template: ` <h1 mat-dialog-title>Show all Topics</h1>
<div mat-dialog-content>
<ul>
<li *ngFor="let topic of data.topics">
{{ topic }}
</li>
</ul>
</div>
<div mat-dialog-actions>
<button mat-button mat-dialog-close>Close</button>
</div>`,
imports: [MatDialogModule, MatButtonModule, NgFor],
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TopicModalComponent {
data = inject(MAT_DIALOG_DATA);
}

10
apps/rxjs/race-condition/src/app/topic.service.ts Normal file
View File

@@ -0,0 +1,10 @@
import { Injectable } from '@angular/core';
import { map, timer } from 'rxjs';
export type TopicType = 'Politic' | 'Sport' | 'Culture' | 'Nature';
@Injectable({ providedIn: 'root' })
export class TopicService {
fakeGetHttpTopic = () =>
timer(1000).pipe(map((): TopicType[] => ['Politic', 'Culture', 'Nature']));
}

0
apps/rxjs/race-condition/src/assets/.gitkeep Normal file
View File

BIN
apps/rxjs/race-condition/src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

13
apps/rxjs/race-condition/src/index.html Normal file
View File

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

8
apps/rxjs/race-condition/src/main.ts Normal file
View File

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

24
apps/rxjs/race-condition/src/styles.scss Normal file
View File

@@ -0,0 +1,24 @@
/* You can add global styles to this file, and also import other style files */
@use '@angular/material' as mat;
@include mat.core();
$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$theme-warn: mat.define-palette(mat.$red-palette);
$theme: mat.define-light-theme(
(
color: (
primary: $theme-primary,
accent: $theme-accent,
warn: $theme-warn,
),
typography: mat.define-typography-config(),
)
);
@include mat.dialog-theme($theme);
@include mat.button-theme($theme);

1
apps/rxjs/race-condition/src/test-setup.ts Normal file
View File

@@ -0,0 +1 @@
import 'jest-preset-angular/setup-jest';