();
- constructor(
- private router: Router,
- private route: ActivatedRoute,
- private questionsService: QuestionsService,
- private http: HttpClient,
- private resultsService: ResultsService,
- private streakService: StreakService,
- ) { }
-
ngOnInit() {
// subscribe to both query params and questions list, so we can react to changes in either of them
combineLatest([
@@ -143,7 +145,7 @@ export class QuestionInfoPage implements OnInit, OnDestroy {
π
404 - Answer Text Not Found
- Help us fill the gap β we\'d love your contribution via a
+ Help us fill the gap β we'd love your contribution via a
Pull Request on GitHub
diff --git a/src/app/quiz/quiz.module.ts b/src/app/quiz/quiz.module.ts
index 708b11f..c3b9aee 100644
--- a/src/app/quiz/quiz.module.ts
+++ b/src/app/quiz/quiz.module.ts
@@ -7,12 +7,12 @@ import { QuizPage } from './quiz.page';
import { QuizPageRoutingModule } from './quiz-routing.module';
@NgModule({
- imports: [
- IonicModule,
- CommonModule,
- FormsModule,
- QuizPageRoutingModule
- ],
- declarations: [QuizPage]
+ imports: [
+ IonicModule,
+ CommonModule,
+ FormsModule,
+ QuizPageRoutingModule,
+ QuizPage
+ ]
})
export class QuizPageModule {}
diff --git a/src/app/quiz/quiz.page.html b/src/app/quiz/quiz.page.html
index be11364..3eacc2f 100644
--- a/src/app/quiz/quiz.page.html
+++ b/src/app/quiz/quiz.page.html
@@ -9,105 +9,118 @@
-
+ }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ @if (!question) {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
-
-
-
+ @if (question) {
+
+
+
+ }
-
-
-
+ @if (!question) {
+
+
+
+ }
Progress: {{ question ? (percent$ | async) : 0 }}%
-
-
+ @if (question) {
+
+ }
+ @if (!question) {
+
+ }
-
+ @if (isRandomized) {
+
Skip
-
+
+ }
- Check your answer
+ Check your answer
-
-
+ (click)="visitTheoryPage()"
+ color="tertiary"
+ fill="clear"
+ expand="block"
+ size="large">
+ Read theory
+
+
-->
+
+
diff --git a/src/app/quiz/quiz.page.scss b/src/app/quiz/quiz.page.scss
index c475cae..4ce316b 100644
--- a/src/app/quiz/quiz.page.scss
+++ b/src/app/quiz/quiz.page.scss
@@ -1,14 +1,19 @@
-:host::ng-deep ion-title[size="large"] {
- height: fit-content;
-}
.header {
&__title {
display: flex;
justify-content: space-between;
align-items: center;
- height: fit-content;
- width: 100%;
+ width: 55%;
+ min-width: 768px;
+ margin: 0 auto;
+ }
+
+ &__large-text {
+ font-size: 34px;
+ font-weight: 700;
+ margin: 0;
+ letter-spacing: 0.01em;
}
&__toggle {
@@ -84,6 +89,14 @@
}
@media (max-width: 768px) {
+ .header {
+ &__title {
+ width: 100%;
+ min-width: 100%;
+ padding: 0 1rem;
+ }
+ }
+
.question__name {
font-size: 1.8rem !important;
}
diff --git a/src/app/quiz/quiz.page.spec.ts b/src/app/quiz/quiz.page.spec.ts
index 18c0bd8..6e9cc07 100644
--- a/src/app/quiz/quiz.page.spec.ts
+++ b/src/app/quiz/quiz.page.spec.ts
@@ -1,5 +1,6 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
+import { provideRouter } from '@angular/router';
import { QuizPage } from './quiz.page';
@@ -9,9 +10,9 @@ describe('QuizPage', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [QuizPage],
- imports: [IonicModule.forRoot()]
- }).compileComponents();
+ imports: [IonicModule.forRoot(), QuizPage],
+ providers: [provideRouter([])]
+}).compileComponents();
fixture = TestBed.createComponent(QuizPage);
component = fixture.componentInstance;
diff --git a/src/app/quiz/quiz.page.ts b/src/app/quiz/quiz.page.ts
index 1687cbc..e95587f 100644
--- a/src/app/quiz/quiz.page.ts
+++ b/src/app/quiz/quiz.page.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, inject } from '@angular/core';
import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
import { Observable, Subject } from 'rxjs';
import { take, takeUntil } from 'rxjs/operators';
@@ -8,27 +8,29 @@ import { Question } from '../models/question.model';
import { QuestionsService } from '../services/questions.service';
import { ResultsService } from '../services/results.service';
import { QuestionLevels } from '../enums/questions.enum';
+import { IonicModule } from '@ionic/angular';
+import { AsyncPipe } from '@angular/common';
@Component({
- selector: 'app-quiz',
- templateUrl: 'quiz.page.html',
- styleUrls: ['quiz.page.scss']
+ selector: 'app-quiz',
+ templateUrl: 'quiz.page.html',
+ styleUrls: ['quiz.page.scss'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ imports: [IonicModule, AsyncPipe]
})
export class QuizPage implements OnInit, OnDestroy {
+ private questionsService = inject(QuestionsService);
+ private router = inject(Router);
+ private route = inject(ActivatedRoute);
+ private resultsService = inject(ResultsService);
+
questionLevels = QuestionLevels;
question: Question | null = null;
percent$: Observable | null = null;
isRandomized = JSON.parse(localStorage.getItem('isRandomized') || 'false');
private destroy$ = new Subject();
- private timerId: any;
-
- constructor(
- private questionsService: QuestionsService,
- private router: Router,
- private route: ActivatedRoute,
- private resultsService: ResultsService,
- ) {}
+ private timerId?: ReturnType;
ngOnInit() {
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params: QueryParams) => {
@@ -70,7 +72,7 @@ export class QuizPage implements OnInit, OnDestroy {
this.router.navigate(['tabs/quiz/answer-structure'], navigationExtras);
}
- public toggleQuiz(event: any): void {
+ public toggleQuiz(event: CustomEvent<{ checked: boolean }>): void {
this.isRandomized = event.detail.checked;
localStorage.setItem('isRandomized', JSON.stringify(this.isRandomized));
diff --git a/src/app/quiz/subpages/answer-structure/answer-structure.module.ts b/src/app/quiz/subpages/answer-structure/answer-structure.module.ts
index 95ad4d5..cb16e48 100644
--- a/src/app/quiz/subpages/answer-structure/answer-structure.module.ts
+++ b/src/app/quiz/subpages/answer-structure/answer-structure.module.ts
@@ -9,12 +9,12 @@ import { AnswerStructurePageRoutingModule } from './answer-structure-routing.mod
import { AnswerStructurePage } from './answer-structure.page';
@NgModule({
- imports: [
- CommonModule,
- FormsModule,
- IonicModule,
- AnswerStructurePageRoutingModule
- ],
- declarations: [AnswerStructurePage]
+ imports: [
+ CommonModule,
+ FormsModule,
+ IonicModule,
+ AnswerStructurePageRoutingModule,
+ AnswerStructurePage
+ ]
})
export class AnswerStructurePageModule {}
diff --git a/src/app/quiz/subpages/answer-structure/answer-structure.page.html b/src/app/quiz/subpages/answer-structure/answer-structure.page.html
index 9f791b6..200fd25 100644
--- a/src/app/quiz/subpages/answer-structure/answer-structure.page.html
+++ b/src/app/quiz/subpages/answer-structure/answer-structure.page.html
@@ -12,28 +12,29 @@
-
- Select the points you covered in your answer - this helps indicate how complete your response was.
-
-
+
+ Select the points you covered in your answer - this helps indicate how complete your response was.
+
+
-
+
-
- {{ step?.name }}
-
-
+ @for (step of question?.structure; track step) {
+
+ {{ step?.name }}
+
+
+ }
-
+
-
- Save your answer progress
-
-
-
+
+ Save your answer progress
+
+
+
diff --git a/src/app/quiz/subpages/answer-structure/answer-structure.page.spec.ts b/src/app/quiz/subpages/answer-structure/answer-structure.page.spec.ts
index 71cfb0b..226f7d2 100644
--- a/src/app/quiz/subpages/answer-structure/answer-structure.page.spec.ts
+++ b/src/app/quiz/subpages/answer-structure/answer-structure.page.spec.ts
@@ -1,5 +1,6 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
+import { provideRouter } from '@angular/router';
import { AnswerStructurePage } from './answer-structure.page';
@@ -9,9 +10,9 @@ describe('AnswerStructurePage', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [ AnswerStructurePage ],
- imports: [IonicModule.forRoot()]
- }).compileComponents();
+ imports: [IonicModule.forRoot(), AnswerStructurePage],
+ providers: [provideRouter([])]
+}).compileComponents();
fixture = TestBed.createComponent(AnswerStructurePage);
component = fixture.componentInstance;
diff --git a/src/app/quiz/subpages/answer-structure/answer-structure.page.ts b/src/app/quiz/subpages/answer-structure/answer-structure.page.ts
index 4861540..0673c65 100644
--- a/src/app/quiz/subpages/answer-structure/answer-structure.page.ts
+++ b/src/app/quiz/subpages/answer-structure/answer-structure.page.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, inject } from '@angular/core';
import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@@ -8,26 +8,28 @@ import { Question } from 'src/app/models/question.model';
import { QueryParams } from 'src/app/models/app.model';
import { ResultsService } from 'src/app/services/results.service';
import { StreakService } from 'src/app/services/streak.service';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
@Component({
- selector: 'app-answer-structure',
- templateUrl: './answer-structure.page.html',
- styleUrls: ['./answer-structure.page.scss'],
+ selector: 'app-answer-structure',
+ templateUrl: './answer-structure.page.html',
+ styleUrls: ['./answer-structure.page.scss'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ imports: [IonicModule, FormsModule]
})
export class AnswerStructurePage implements OnInit, OnDestroy {
+ private route = inject(ActivatedRoute);
+ private router = inject(Router);
+ private questionsService = inject(QuestionsService);
+ private resultsService = inject(ResultsService);
+ private streakService = inject(StreakService);
+
questionId: number;
question: Question;
private destroy$ = new Subject();
- constructor(
- private route: ActivatedRoute,
- private router: Router,
- private questionsService: QuestionsService,
- private resultsService: ResultsService,
- private streakService: StreakService,
- ) { }
-
ngOnInit() {
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params: QueryParams) => {
this.questionId = +params.questionId;
diff --git a/src/app/services/app.service.ts b/src/app/services/app.service.ts
index aff4ab5..5006600 100644
--- a/src/app/services/app.service.ts
+++ b/src/app/services/app.service.ts
@@ -9,8 +9,6 @@ export class AppService {
// about version changing logic read -> https://semver.org/lang/ru/#spec-item-6 (ΠΏΡΠ½ΠΊΡΡ 6, 7, 8)
private _appVersion: string = versionInfo?.raw || 'v0.0.0';
- constructor() { }
-
public get appVersion(): string {
return this._appVersion;
}
@@ -21,7 +19,7 @@ export class AppService {
return storedLanguage;
}
- const browserLanguage = navigator.language || (navigator as any).userLanguage;
+ const browserLanguage = navigator.language || (navigator as Navigator & { userLanguage?: string }).userLanguage;
const shortCode = browserLanguage ? browserLanguage.split('-')[0].toLowerCase() : '';
let mappedLanguage: Languages | undefined;
diff --git a/src/app/services/profile.service.ts b/src/app/services/profile.service.ts
index 900f46d..ca93549 100644
--- a/src/app/services/profile.service.ts
+++ b/src/app/services/profile.service.ts
@@ -7,8 +7,6 @@ import { Profile } from '../models/profile.model';
providedIn: 'root'
})
export class ProfileService {
- constructor() { }
-
get profile(): Observable {
return of(this._getDefaultProfile());
}
diff --git a/src/app/services/questions.service.ts b/src/app/services/questions.service.ts
index 6f8f149..75c32f9 100644
--- a/src/app/services/questions.service.ts
+++ b/src/app/services/questions.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
import { Question } from '../models/question.model';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@@ -13,9 +13,11 @@ import { Languages } from 'src/app/enums/app.enum';
providedIn: 'root'
})
export class QuestionsService {
- private _questions: BehaviorSubject = new BehaviorSubject([]);
+ private appService = inject(AppService);
- constructor(private appService: AppService) {
+ private _questions = new BehaviorSubject([]);
+
+ constructor() {
this.setQuestions();
}
diff --git a/src/app/services/results.service.ts b/src/app/services/results.service.ts
index a679419..c8d4615 100644
--- a/src/app/services/results.service.ts
+++ b/src/app/services/results.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@@ -9,11 +9,11 @@ import { QuestionsService } from './questions.service';
providedIn: 'root'
})
export class ResultsService {
- private _results: BehaviorSubject = new BehaviorSubject([]);
+ private questionsService = inject(QuestionsService);
- constructor(
- private questionsService: QuestionsService,
- ) {
+ private _results = new BehaviorSubject([]);
+
+ constructor() {
this.questionsService.questions.subscribe(questions => {
let storageResults: Results[] = [];
const stored = localStorage.getItem('results');
diff --git a/src/app/services/streak.service.ts b/src/app/services/streak.service.ts
index 54564b1..b1b8f3b 100644
--- a/src/app/services/streak.service.ts
+++ b/src/app/services/streak.service.ts
@@ -8,8 +8,8 @@ const MILLIS_IN_DAY = 86400000;
providedIn: 'root'
})
export class StreakService {
- private _streak: BehaviorSubject = new BehaviorSubject(0);
- private _hasActivityToday: BehaviorSubject = new BehaviorSubject(false);
+ private _streak = new BehaviorSubject(0);
+ private _hasActivityToday = new BehaviorSubject(false);
constructor() {
this._initStreak();
@@ -65,7 +65,9 @@ export class StreakService {
if (stored) {
return JSON.parse(stored) as StreakData;
}
- } catch { }
+ } catch {
+ // ignore corrupted streak data and fall back to defaults
+ }
return { streak: 0, lastDate: '' };
}
diff --git a/src/app/tabs/tabs.module.ts b/src/app/tabs/tabs.module.ts
index de4184a..71cd01c 100644
--- a/src/app/tabs/tabs.module.ts
+++ b/src/app/tabs/tabs.module.ts
@@ -8,12 +8,12 @@ import { TabsPageRoutingModule } from './tabs-routing.module';
import { TabsPage } from './tabs.page';
@NgModule({
- imports: [
- IonicModule,
- CommonModule,
- FormsModule,
- TabsPageRoutingModule
- ],
- declarations: [TabsPage]
+ imports: [
+ IonicModule,
+ CommonModule,
+ FormsModule,
+ TabsPageRoutingModule,
+ TabsPage
+ ]
})
export class TabsPageModule {}
diff --git a/src/app/tabs/tabs.page.spec.ts b/src/app/tabs/tabs.page.spec.ts
index 703f220..adfc1ee 100644
--- a/src/app/tabs/tabs.page.spec.ts
+++ b/src/app/tabs/tabs.page.spec.ts
@@ -1,5 +1,6 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
import { TabsPage } from './tabs.page';
@@ -9,9 +10,10 @@ describe('TabsPage', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
- declarations: [TabsPage],
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
- }).compileComponents();
+ imports: [TabsPage],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ providers: [provideRouter([])],
+}).compileComponents();
}));
beforeEach(() => {
diff --git a/src/app/tabs/tabs.page.ts b/src/app/tabs/tabs.page.ts
index 7d64f97..1e27763 100644
--- a/src/app/tabs/tabs.page.ts
+++ b/src/app/tabs/tabs.page.ts
@@ -1,12 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
@Component({
- selector: 'app-tabs',
- templateUrl: 'tabs.page.html',
- styleUrls: ['tabs.page.scss']
+ selector: 'app-tabs',
+ templateUrl: 'tabs.page.html',
+ styleUrls: ['tabs.page.scss'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ imports: [IonicModule]
})
-export class TabsPage {
-
- constructor() {}
-
-}
+export class TabsPage {}
diff --git a/src/assets/content/rus/answers/122-Directives-in-Angular-Structural-vs-Attribute.md b/src/assets/content/rus/answers/122-Directives-in-Angular-Structural-vs-Attribute.md
new file mode 100644
index 0000000..09fb7cc
--- /dev/null
+++ b/src/assets/content/rus/answers/122-Directives-in-Angular-Structural-vs-Attribute.md
@@ -0,0 +1,83 @@
+ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ ΠΠ°Π·ΠΎΠ²ΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅
+Π Angular Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ β ΡΡΠΎ ΠΊΠ»Π°ΡΡΡ Ρ Π΄Π΅ΠΊΠΎΡΠ°ΡΠΎΡΠΎΠΌ @Directive(), ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΠ°ΡΡΠΎΠΌΠ½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π² DOM. ΠΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ Π΄Π΅Π»ΡΡΡΡ Π½Π° ΡΡΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΡΠΈΠΏΠ°: ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ (Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ ΡΠΎ ΡΠ²ΠΎΠΈΠΌ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠΌ), ΡΡΡΡΠΊΡΡΡΠ½ΡΠ΅ ΠΈ Π°ΡΡΠΈΠ±ΡΡΠ½ΡΠ΅. ΠΠ° ΡΠΎΠ±Π΅ΡΠ΅Π΄ΠΎΠ²Π°Π½ΠΈΡΡ
ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΡΡ ΡΡΠ°Π²Π½ΠΈΡΡ ΠΈ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ
Π΄Π²ΡΡ
Π²ΠΈΠ΄ΠΎΠ².
+
+Π‘ΡΡΡΠΊΡΡΡΠ½ΡΠ΅ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ Π² Angular
+Π‘ΡΡΡΠΊΡΡΡΠ½ΡΠ΅ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°ΠΌΡ ΡΡΡΡΠΊΡΡΡΡ DOM-Π΄Π΅ΡΠ΅Π²Π°. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ, ΡΠ΄Π°Π»ΡΡΡ ΠΈΠ»ΠΈ Π·Π°ΠΌΠ΅Π½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π² ΡΠ°Π±Π»ΠΎΠ½Π΅ ΠΈΡ
Π»Π΅Π³ΠΊΠΎ ΡΠ·Π½Π°ΡΡ ΠΏΠΎ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠΌΡ ΠΏΡΠ΅ΡΠΈΠΊΡΡ-Π·Π²ΡΠ·Π΄ΠΎΡΠΊΠ΅ * ΠΏΠ΅ΡΠ΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ.
+ΠΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅: ΡΡΠ»ΠΎΠ²Π½ΡΠΉ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ ΠΈ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠ° ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΉ (ΡΠΏΠΈΡΠΊΠΎΠ²).
+
+
+<!-- ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΡΠΊΡΠΎΠ΅ΡΡΡ ΡΠ΅ΡΠ΅Π· CSS, Π° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΠΈΡΡΡ ΠΈΠ· DOM -->
+<div *ngIf="isVisible">
+ ΠΡΠΎΡ Π±Π»ΠΎΠΊ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ isVisible === true.
+</div>
+
+<!-- ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠ°ΡΡΠΈΠ²Π° Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°Π½Π° ΠΊΠΎΠΏΠΈΡ ΡΠ΅Π³Π° li -->
+<ul>
+ <li *ngFor="let item of items">{{ item.name }}</li>
+</ul>
+
+
+ΠΡΡΠΈΠ±ΡΡΠ½ΡΠ΅ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ Π² Angular
+ΠΡΡΠΈΠ±ΡΡΠ½ΡΠ΅ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΈΠ»ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ DOM-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ. ΠΠ½ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΠ΅ HTML-Π°ΡΡΠΈΠ±ΡΡΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΠΎΠΏΠ΅ΡΡΠΈ Π±ΠΈΠ½Π΄ΠΈΠ½Π³, Π½ΠΎ Π½Π΅ ΡΠ΄Π°Π»ΡΡΡ ΡΠ°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· DOM.
+
+
+<!-- ΠΠ»Π°ΡΡ 'active' Π΄ΠΎΠ±Π°Π²ΠΈΡΡΡ ΠΏΡΠΈ isActive === true, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² DOM ΠΎΡΡΠ°Π΅ΡΡΡ Π²ΡΠ΅Π³Π΄Π° -->
+<div [ngClass]="{'active': isActive}">
+ Π‘ΡΠΈΠ»Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΡΡ.
+</div>
+
+<!-- ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ inline-style -->
+<input [ngStyle]="{'background-color': statusColor}" />
+
+
+ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΈ ΡΡΠ°Π²Π½Π΅Π½ΠΈΠ΅
+- Π‘ΡΠ΅ΡΠ° Π²Π»ΠΈΡΠ½ΠΈΡ: Π‘ΡΡΡΠΊΡΡΡΠ½ΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ Π½Π°Π»ΠΈΡΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π½ΡΡΡΠΈ ΡΠ°Π±Π»ΠΎΠ½Π° (ΠΌΠ΅Π½ΡΡΡ DOM-Π΄Π΅ΡΠ΅Π²ΠΎ), Π° Π°ΡΡΠΈΠ±ΡΡΠ½ΡΠ΅ Π»ΠΈΡΡ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΡΠΈΠ»ΠΈ, ΠΊΠ»Π°ΡΡΡ, ΡΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ).
+- Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ: Π‘ΡΡΡΠΊΡΡΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΡΡ ΡΠ΅ΡΠ΅Π· * (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, *ngIf), Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π°ΡΡΠΈΠ±ΡΡΠ½ΡΠ΅ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π² ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ
ΡΠΊΠΎΠ±ΠΊΠ°Ρ
[] (ΠΊΠ°ΠΊ [ngClass]).
+- Π£Π½ΠΈΡΡΠΎΠΆΠ΅Π½ΠΈΠ΅: Π‘ΡΡΡΠΊΡΡΡΠ½Π°Ρ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Π° ΠΌΠΎΠΆΠ΅Ρ ΡΠ½ΠΈΡΡΠΎΠΆΠΈΡΡ DOM-ΡΠ·Π΅Π» ΠΈ Π²ΡΠ΅ Π΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ·Π»Ρ Π² ΠΏΠ°ΠΌΡΡΠΈ, ΡΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ Π΄Π΅ΡΠ΅Π²Π°.
+
+ΠΠ΅Π»ΡΠ·Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠ½ΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ Π½Π° ΠΎΠ΄ΠΈΠ½ DOM-ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ *ngIf ΠΈ *ngFor Π½Π° ΠΎΠ΄Π½ΠΎΠΌ <div> ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΠΎΡΠΈΠ±ΠΊΠ΅ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ Π² Angular. ΠΠ»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΎΠ±Π΅ΡΡΠΊΡ ΠΈΠ· ΡΠ΅Π³Π° <ng-container>.
+Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠΎ Π·Π²ΡΠ·Π΄ΠΎΡΠΊΠΎΠΉ (*ngIf) β ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ°Ρ
Π°Ρ Π½Π°Π΄ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠ΅ΠΉ ΡΠ΅Π³Π° <ng-template> ΠΈ property binding [ngIf]. ΠΡΠΈ ΡΠ±ΠΎΡΠΊΠ΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅Ρ ΡΡΠΎ Π² ΠΎΠ±ΡΡΠ½ΡΠΉ Π±ΠΈΠ½Π΄ΠΈΠ½Π³.
+
+Π£Π³Π»ΡΠ±Π»Π΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠΏΠ΅ΠΊΡ
+ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ°ΡΡΠΎΠΌΠ½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠ½ΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ ΠΌΡ ΠΈΠ½ΠΆΠ΅ΠΊΡΠΈΠΌ Π² ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡ Π΄Π²Π° Π²Π°ΠΆΠ½Π΅ΠΉΡΠΈΡ
ΡΠ΅ΡΠ²ΠΈΡΠ°:
+1. TemplateRef β ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½, ΠΊΠΎΡΠΎΡΡΠΉ Π½ΡΠΆΠ½ΠΎ ΠΎΡΡΠ΅Π½Π΄Π΅ΡΠΈΡΡ.
+2. ViewContainerRef β ΠΌΠΎΡΠ½ΡΠΉ ΡΠ΅ΡΠ²ΠΈΡ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΊΡΠ΄Π° ΡΡΠΎΡ ΡΠ°Π±Π»ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π²ΡΡΠ°Π²Π»ΡΡΡΡΡ, ΠΈ ΡΠ΅ΡΠ΅Π· ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Π²ΡΡΡΠ½ΡΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ (createEmbeddedView) ΠΈΠ»ΠΈ ΡΠ΄Π°Π»ΡΠ΅ΠΌ (clear) DOM-ΡΠ·Π»Ρ.
+
+
+import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+
+@Directive({ selector: '[appCustomIf]' })
+export class CustomIfDirective {
+ constructor(
+ private templateRef: TemplateRef<any>,
+ private viewContainer: ViewContainerRef
+ ) {}
+
+ @Input() set appCustomIf(condition: boolean) {
+ if (condition) {
+ // ΠΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΠΌ ΡΠ°Π±Π»ΠΎΠ½ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅
+ this.viewContainer.createEmbeddedView(this.templateRef);
+ } else {
+ // ΠΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠΈΡΠ°Π΅ΠΌ DOM ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
+ this.viewContainer.clear();
+ }
+ }
+}
+
+ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ°ΡΡΠΎΠΌΠ½ΠΎΠΉ Π°ΡΡΠΈΠ±ΡΡΠ½ΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ ΠΌΠ΅Ρ
Π°Π½ΠΈΠΊΠ° ΠΏΡΠΎΡΠ΅. ΠΠ±ΡΡΠ½ΠΎ ΠΈΠ½ΠΆΠ΅ΠΊΡΡΡ ElementRef (ΡΡΡΠ»ΠΊΡ Π½Π° Π½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ) ΠΈ ΡΠ°ΡΡΠΎ Renderer2 (Π΄Π»Ρ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΠΉ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ Ρ DOM Π²Π½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠΈ SSR).
+
+import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';
+
+@Directive({ selector: '[appHighlight]' })
+export class HighlightDirective {
+ constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+ @HostListener('mouseenter') onMouseEnter() {
+ this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
+ }
+
+ @HostListener('mouseleave') onMouseLeave() {
+ this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
+ }
+}
+
diff --git a/src/main.ts b/src/main.ts
index 91ec6da..f136106 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,12 +1,29 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { RouteReuseStrategy, provideRouter, withHashLocation } from '@angular/router';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
-import { AppModule } from './app/app.module';
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+
+import { AppComponent } from './app/app.component';
+import { routes } from './app/app.routes';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
-platformBrowserDynamic().bootstrapModule(AppModule)
- .catch(err => console.log(err));
+bootstrapApplication(AppComponent, {
+ providers: [
+ provideZoneChangeDetection(),
+ { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+ importProvidersFrom(
+ IonicModule.forRoot({
+ mode: 'ios',
+ swipeBackEnabled: false, // disable swipe back gesture on iOS
+ })
+ ),
+ provideHttpClient(withXhr(), withInterceptorsFromDi()),
+ provideRouter(routes, withHashLocation()),
+ ],
+}).catch(err => console.log(err));
diff --git a/src/polyfills.ts b/src/polyfills.ts
index ba409f9..687c404 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -57,7 +57,7 @@ import './zone-flags';
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
/***************************************************************************************************
diff --git a/src/test.ts b/src/test.ts
index 7a50f8b..7632e27 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -1,25 +1,14 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
-declare const require: {
- context(path: string, deep?: boolean, filter?: RegExp): {
- (id: string): T;
- keys(): string[];
- };
-};
-
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/src/zone-flags.ts b/src/zone-flags.ts
index c84245f..0d80b64 100644
--- a/src/zone-flags.ts
+++ b/src/zone-flags.ts
@@ -3,4 +3,4 @@
* running with certain Web Component callbacks
*/
// eslint-disable-next-line no-underscore-dangle
-(window as any).__Zone_disable_customElements = true;
+(window as typeof window & { __Zone_disable_customElements?: boolean }).__Zone_disable_customElements = true;
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 82d91dc..a7c49a3 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -11,5 +11,13 @@
],
"include": [
"src/**/*.d.ts"
- ]
+ ],
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "nullishCoalescingNotNullable": "suppress",
+ "optionalChainNotNullable": "suppress"
+ }
+ }
+ }
}
diff --git a/tsconfig.json b/tsconfig.json
index 40b39b7..47974c8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,18 +2,22 @@
{
"compileOnSave": false,
"compilerOptions": {
- "baseUrl": "./",
+ "paths": {
+ "get-version": ["./get-version"],
+ "src/*": ["./src/*"]
+ },
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"resolveJsonModule": true,
- "downlevelIteration": true,
+ "skipLibCheck": true,
+ "strict": false,
"experimentalDecorators": true,
- "moduleResolution": "node",
+ "moduleResolution": "bundler",
"importHelpers": true,
- "target": "es2015",
+ "target": "ES2022",
"module": "es2020",
- "lib": ["es2018", "dom"]
+ "useDefineForClassFields": false
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index 092345b..6aa248e 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -14,5 +14,13 @@
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
- ]
+ ],
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "nullishCoalescingNotNullable": "suppress",
+ "optionalChainNotNullable": "suppress"
+ }
+ }
+ }
}
diff --git a/tslint.json b/tslint.json
deleted file mode 100644
index 172a40e..0000000
--- a/tslint.json
+++ /dev/null
@@ -1,88 +0,0 @@
-{
- "extends": "tslint:recommended",
- "rulesDirectory": [
- "codelyzer"
- ],
- "rules": {
- "array-type": false,
- "arrow-parens": false,
- "deprecation": {
- "severity": "warn"
- },
- "import-blacklist": [
- true,
- "rxjs/Rx"
- ],
- "interface-name": false,
- "max-classes-per-file": false,
- "max-line-length": [
- true,
- 140
- ],
- "member-access": false,
- "member-ordering": [
- true,
- {
- "order": [
- "static-field",
- "instance-field",
- "static-method",
- "instance-method"
- ]
- }
- ],
- "no-consecutive-blank-lines": false,
- "no-console": [
- true,
- "debug",
- "info",
- "time",
- "timeEnd",
- "trace"
- ],
- "no-empty": false,
- "no-inferrable-types": [
- true,
- "ignore-params"
- ],
- "no-non-null-assertion": true,
- "no-redundant-jsdoc": true,
- "no-switch-case-fall-through": true,
- "no-use-before-declare": true,
- "no-var-requires": false,
- "object-literal-key-quotes": [
- true,
- "as-needed"
- ],
- "object-literal-sort-keys": false,
- "ordered-imports": false,
- "quotemark": [
- true,
- "single"
- ],
- "trailing-comma": false,
- "no-output-on-prefix": true,
- "no-inputs-metadata-property": true,
- "no-host-metadata-property": true,
- "no-input-rename": true,
- "no-output-rename": true,
- "use-lifecycle-interface": true,
- "use-pipe-transform-interface": true,
- "one-variable-per-declaration": false,
- "component-class-suffix": [true, "Page", "Component"],
- "directive-class-suffix": true,
- "directive-selector": [
- true,
- "attribute",
- "app",
- "camelCase"
- ],
- "component-selector": [
- true,
- "element",
- "app",
- "page",
- "kebab-case"
- ]
- }
-}