diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..5a4e9d4 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d6fa951..88b6f13 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,13 +1,15 @@ import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import {Child1Component} from "./child-1/child-1.component"; +import {Child2Component} from "./child-2/child-2.component"; +import {ParentComponent} from "./parent/parent.component"; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet], templateUrl: './app.component.html', - styleUrl: './app.component.css' + styleUrl: './app.component.css', + imports: [Child1Component, Child2Component, ParentComponent], }) export class AppComponent { - title = 'hotel-manager'; + public title: string = 'hotel-manager'; } diff --git a/src/app/child-1/child-1.component.html b/src/app/child-1/child-1.component.html new file mode 100644 index 0000000..e69de29 diff --git a/src/app/child-1/child-1.component.ts b/src/app/child-1/child-1.component.ts new file mode 100644 index 0000000..34d85e0 --- /dev/null +++ b/src/app/child-1/child-1.component.ts @@ -0,0 +1,23 @@ +import {Component, EventEmitter, Input, Output} from "@angular/core"; + +@Component({ + selector: 'app-child-1', + standalone: true, + template: ` +

{{balance}}€

+ +

No mo money

+ ` +}) +export class Child1Component { + @Input() + public balance: number = 1000; + + @Output() + public balanceChange: EventEmitter = new EventEmitter(); + + public minusFifty() { + this.balance -= 50; + this.balanceChange.emit(this.balance); + } +} diff --git a/src/app/child-2/child-2.component.html b/src/app/child-2/child-2.component.html new file mode 100644 index 0000000..b490223 --- /dev/null +++ b/src/app/child-2/child-2.component.html @@ -0,0 +1,2 @@ +

{{balance}}€

+ diff --git a/src/app/child-2/child-2.component.ts b/src/app/child-2/child-2.component.ts new file mode 100644 index 0000000..3968785 --- /dev/null +++ b/src/app/child-2/child-2.component.ts @@ -0,0 +1,23 @@ +import {Component, EventEmitter, Input, Output} from "@angular/core"; + +@Component({ + selector: 'app-child-2', + standalone: true, + template: ` +

{{balance}}€

+ +

No mo money

+ ` +}) +export class Child2Component { + @Input() + public balance: number = 1000; + + @Output() + public balanceChange: EventEmitter = new EventEmitter(); + + public minusFifty() { + this.balance -= 50; + this.balanceChange.emit(this.balance); + } +} diff --git a/src/app/parent/parent.component.html b/src/app/parent/parent.component.html new file mode 100644 index 0000000..bb7749f --- /dev/null +++ b/src/app/parent/parent.component.html @@ -0,0 +1,6 @@ +

{{balance}}€

+ + + + + diff --git a/src/app/parent/parent.component.ts b/src/app/parent/parent.component.ts new file mode 100644 index 0000000..294a8c4 --- /dev/null +++ b/src/app/parent/parent.component.ts @@ -0,0 +1,24 @@ +import {Component} from "@angular/core"; +import {Child1Component} from "../child-1/child-1.component"; +import {Child2Component} from "../child-2/child-2.component"; + +@Component({ + selector: 'app-parent', + standalone: true, + imports: [ + Child1Component, + Child2Component + ], + templateUrl: 'parent.component.html' +}) +export class ParentComponent { + public balance: number = 1000; + + public gibMoney(): void { + this.balance += 100; + } + + public setBalance(balance: number): void { + this.balance = balance; + } +} diff --git a/src/index.html b/src/index.html index 4795001..b51fcb5 100644 --- a/src/index.html +++ b/src/index.html @@ -5,6 +5,8 @@ HotelManager + +