feat(Child): add broke message and update button styles
This commit is contained in:
parent
4c94212b7f
commit
f243483688
@ -1,3 +1,4 @@
|
|||||||
<h1>Child</h1>
|
<h1>Child</h1>
|
||||||
<p>Balance: {{balance}}</p>
|
<p>Balance: {{balance}}</p>
|
||||||
<button type="button" (click)=takeMoney() class="btn btn-secondary">Take Money</button>
|
<p [class.hidden]="!isBroke">Im broke. Now im about as poor as Jan-Marlon.</p>
|
||||||
|
<button type="button" (click)=takeMoney() class="button">Take Money</button>
|
||||||
|
@ -6,11 +6,20 @@ import { Component, Input, Output, EventEmitter } from "@angular/core";
|
|||||||
templateUrl: './child.component.html',
|
templateUrl: './child.component.html',
|
||||||
})
|
})
|
||||||
export class ChildComponent {
|
export class ChildComponent {
|
||||||
@Input() public balance:number = 0;
|
@Input() public balance: number = 0;
|
||||||
@Output() balanceChange = new EventEmitter<number>();
|
@Output() balanceChange = new EventEmitter<number>();
|
||||||
|
|
||||||
|
public isBroke = false;
|
||||||
|
|
||||||
public takeMoney() {
|
public takeMoney() {
|
||||||
|
if (this.balance <= 0) {
|
||||||
|
this.isBroke = true;
|
||||||
|
} else {
|
||||||
this.balance -= 50;
|
this.balance -= 50;
|
||||||
|
if (this.balance == 0) {
|
||||||
|
this.isBroke = true;
|
||||||
|
}
|
||||||
this.balanceChange.emit(this.balance);
|
this.balanceChange.emit(this.balance);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,9 @@
|
|||||||
<h1>Parent</h1>
|
<div class="m-3">
|
||||||
|
<h1>Parent</h1>
|
||||||
<p>Kontostand: {{ balance }}</p>
|
<p>Kontostand: {{ balance }}</p>
|
||||||
<button type="button" class="px-3 py-1 border-[3px] border-black m-3" (click)=addFifty()>Add Money</button>
|
<button type="button" class="button" (click)=addFifty()>Add Money</button>
|
||||||
|
|
||||||
<app-child [(balance)]="balance"></app-child>
|
<app-child [(balance)]="balance"></app-child>
|
||||||
<app-child [(balance)]="balance"></app-child>
|
<app-child [(balance)]="balance"></app-child>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@ -2,3 +2,7 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
.button {
|
||||||
|
@apply border-black rounded px-3 py-1 border-[3px];
|
||||||
|
}
|
||||||
|
@ -1,10 +1,17 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
|
||||||
|
const colors = require('tailwindcss/colors');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: [
|
content: [
|
||||||
"./src/**/*.{html,ts}",
|
"./src/**/*.{html,ts}",
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {
|
||||||
|
colors: {
|
||||||
|
...colors,
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user