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

refactor: move libs

Browse Source
This commit is contained in:
thomas
2024-05-11 09:05:59 +02:00
parent 216d485c53
commit 4a3c7f23e0
284 changed files with 263 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/angular/13-highly-customizable-css/src/app/page.component.ts Normal file
View File

@@ -0,0 +1,17 @@
/* eslint-disable @angular-eslint/component-selector */
import { Component } from '@angular/core';
import { TextStaticComponent } from './static-text.component';
import { TextComponent } from './text.component';
@Component({
selector: 'page',
standalone: true,
imports: [TextStaticComponent, TextComponent],
template: `
<static-text></static-text>
<static-text type="error"></static-text>
<static-text type="warning"></static-text>
<text [font]="15" color="blue">This is a blue text</text>
`,
})
export class PageComponent {}

33
apps/angular/13-highly-customizable-css/src/app/static-text.component.ts Normal file
View File

@@ -0,0 +1,33 @@
/* eslint-disable @angular-eslint/component-selector */
import { Component, Input } from '@angular/core';
import { TextComponent } from './text.component';
export type StaticTextType = 'normal' | 'warning' | 'error';
@Component({
selector: 'static-text',
standalone: true,
imports: [TextComponent],
template: `
<text [font]="font" [color]="color">This is a static text</text>
`,
})
export class TextStaticComponent {
@Input() set type(type: StaticTextType) {
switch (type) {
case 'error': {
this.font = 30;
this.color = 'red';
break;
}
case 'warning': {
this.font = 25;
this.color = 'orange';
break;
}
}
}
font = 10;
color = 'black';
}

16
apps/angular/13-highly-customizable-css/src/app/text.component.ts Normal file
View File

@@ -0,0 +1,16 @@
/* eslint-disable @angular-eslint/component-selector */
import { Component, Input } from '@angular/core';
@Component({
selector: 'text',
standalone: true,
template: `
<p style="font-size: {{ font }}px; color: {{ color }}">
<ng-content></ng-content>
</p>
`,
})
export class TextComponent {
@Input() font = 10;
@Input() color = 'black';
}

0
apps/angular/13-highly-customizable-css/src/assets/.gitkeep Normal file
View File

BIN
apps/angular/13-highly-customizable-css/src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

13
apps/angular/13-highly-customizable-css/src/index.html Normal file
View File

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

4
apps/angular/13-highly-customizable-css/src/main.ts Normal file
View File

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

1
apps/angular/13-highly-customizable-css/src/styles.scss Normal file
View File

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