/
pokedex.component.ts
83 lines (76 loc) · 2.51 KB
/
pokedex.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { Component, inject, OnInit } from '@angular/core';
import { MatButton } from '@angular/material/button';
import { PokemonListComponent } from '../../components/pokemon-list/pokemon-list.component';
import { MatDialog } from '@angular/material/dialog';
import { PopupComponent } from '../../components/popup/popup.component';
import { FormComponent } from '../../components/form/form.component';
import { NgOptimizedImage, provideImgixLoader } from '@angular/common';
import { BannerGridComponent } from '../../components/banner-grid/banner-grid.component';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@Component({
selector: 'app-pokedex',
standalone: true,
imports: [
MatButton,
PokemonListComponent,
FormComponent,
NgOptimizedImage,
BannerGridComponent,
],
templateUrl: './pokedex.component.html',
styleUrl: './pokedex.component.scss',
providers: [
provideImgixLoader('https://ng-pokedex-optimization.netlify.app/'),
],
})
export class PokedexComponent implements OnInit {
public hideForm = true;
public banners = {
mobile: '/assets/images/pokemon-banner-mobile.webp',
desktop: '/assets/images/pokemon-banner.webp',
};
// initialising the banner with a default value
public banner = this.banners.mobile;
private breakpointObserver = inject(BreakpointObserver);
private dialog = inject(MatDialog);
ngOnInit() {
this.breakpointObserver
.observe([
Breakpoints.XSmall,
Breakpoints.Small,
Breakpoints.Medium,
Breakpoints.Large,
Breakpoints.XLarge,
])
.subscribe(result => {
if (result.matches) {
if (result.breakpoints[Breakpoints.XSmall]) {
this.banner = this.banners.mobile;
}
if (result.breakpoints[Breakpoints.Small]) {
this.banner = this.banners.mobile;
}
if (result.breakpoints[Breakpoints.Medium]) {
this.banner = this.banners.desktop;
}
if (result.breakpoints[Breakpoints.Large]) {
this.banner = this.banners.desktop;
}
if (result.breakpoints[Breakpoints.XLarge]) {
this.banner = this.banners.desktop;
}
}
});
}
openDialog(): void {
const dialogRef = this.dialog.open(PopupComponent, {
data: { name: 'tester', pokemon: 'pikachu' },
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
openForm(): void {
this.hideForm = false;
}
}