[Link].
css
h2 {
font-size: 1.8rem;
color: #007bff;
margin-bottom: 10px;
text-align: left; /* Căn trái */
}
/* Căn chỉnh toàn bộ form vềbên trái */
.form-container {
display: flex;
flex-direction: column;
align-items: flex-start; /* Căn trái */
max-width: 350px; /* Giới hạn chiều rộng */
margin-left: 0; /* Đảm bảo không bị căn giữa */
}
.form-group {
display: flex;
flex-direction: column;
align-items: flex-start; /* Căn trái */
margin-bottom: 8px;
width: 100%;
}
label {
font-weight: bold;
margin-bottom: 3px;
font-size: 0.9rem;
}
input, select {
padding: 5px;
font-size: 0.9rem;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
max-width: 250px;
}
/* Căn checkbox sát trái */
.checkbox-group {
display: flex;
align-items: center;
gap: 5px;
margin-left: 0; /* Đảm bảo không bị lệch */
}
/* Giảm kích thước checkbox */
.checkbox-group input {
width: 14px;
height: 14px;
margin: 0;
}
/* Căn chữ label gần checkbox hơn */
.checkbox-group label {
font-size: 0.9rem;
margin-left: 5px; /* Giảm khoảng cách thừa */
}
/* Căn trái nút Create */
button {
background-color: #007bff;
color: white;
border: none;
padding: 8px;
font-size: 0.9rem;
cursor: pointer;
border-radius: 5px;
margin-top: 10px;
width: 100%;
max-width: 180px;
text-align: left; /* Căn chữ bên trái trong nút */
}
button:disabled {
background-color: gray;
cursor: not-allowed;
}
button:hover:not(:disabled) {
background-color: #0056b3;
}
/* Căn danh sách vềbên trái */
.stock-list {
list-style: none;
padding: 0;
max-width: 450px;
margin: 0; /* Xóa căn giữa */
}
.stock-item {
font-family: monospace;
white-space: pre-wrap;
border: 1px solid #ccc;
padding: 8px;
margin: 8px 0;
background: #f9f9f9;
text-align: left; /* Căn trái nội dung */
}
Html
<h2>Create Stock Form</h2>
<label>The following element changes from green to red when it is
invalid</label>
<div>
<input
type="text"
[(ngModel)]="[Link]"
(input)="validateName()"
[ngStyle]="{'background-color': isNameValid ? 'lightgreen' :
'lightpink'}"
placeholder="Tên cổphiế u" />
</div>
<label>The following element changes from green to red when it has been
modified</label>
<div>
<input
type="text"
[(ngModel)]="[Link]"
(input)="handleCodeChange()"
[ngStyle]="{'background-color': isCodeEdited ? 'lightpink' :
'lightgreen'}"
placeholder="Mã chứng khoán" />
</div>
<label>The following element changes from green to red when it is visited
by the user, regardless of change</label>
<div>
<input
type="number"
[(ngModel)]="[Link]"
(blur)="handlePriceBlur()"
[ngStyle]="{'background-color': isPriceTouched ? 'lightpink' :
'lightgreen'}"
placeholder="Giá cổphiế u" />
</div>
<div>
<label for="exchange">Exchange:</label>
<select [(ngModel)]="[Link]" name="exchange" id="exchange"
required>
<option value="" disabled selected>-- Select Exchange --</option>
<option value="NASDAQ">NASDAQ</option>
<option value="NYSE">NYSE</option>
<option value="HSX">HSX</option>
</select>
</div>
<div class="checkbox-group">
<input type="checkbox" [(ngModel)]="confirmed" id="confirm-checkbox" />
<label for="confirm-checkbox">I confirm that the information provided
above is accurate!</label>
</div>
<button (click)="createStock()" [disabled]="!confirmed">Create</button>
<h3>Stock List</h3>
<ul class="stock-list">
<li *ngFor="let s of stockList" class="stock-item">
<div>Stock Name is {{ s | json }}</div>
</li>
</ul>
<div>
<strong>Data has been confirmed:</strong> {{ confirmed }}
</div>
Ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-create-stock',
standalone: true,
imports: [FormsModule, CommonModule],
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class CreateStockComponent {
stock = {
name: '',
code: '',
price: 0,
exchange: 'NASDAQ',
favorite: false
};
isNameValid = false;
isCodeEdited = false;
isPriceTouched = false;
confirmed = false;
stockList: any[] = [];
validateName() {
[Link] = [Link]().length > 0;
}
handleCodeChange() {
[Link] = true;
}
handlePriceBlur() {
[Link] = true;
}
createStock() {
[Link]({ ...[Link] });
[Link] = true;
}
}
[Link]
///
Html
<h3>Create Stock Form</h3>
<form [formGroup]="stockForm" (ngSubmit)="submitStock()">
<div>
<label for="name">Name</label>
<input id="name" type="text" formControlName="name" />
<div *ngIf="[Link]('name')?.invalid &&
[Link]('name')?.touched">
Name không đểtrố ng.
</div>
</div>
<div>
<label for="code">Code</label>
<input id="code" type="text" formControlName="code" />
<div *ngIf="[Link]('code')?.invalid &&
[Link]('code')?.touched">
Code phải có ít nhất 3 kí tự.
</div>
</div>
<div>
<label for="price">Stock Price</label>
<input id="price" type="number" formControlName="price" />
<div *ngIf="[Link]('price')?.invalid &&
[Link]('price')?.touched">
Giá cổphiế u phải lớn hơn 0.
</div>
</div>
<button type="submit" [disabled]="[Link]">Submit</button>
</form>
<button (click)="loadStockServer()">Load Stock</button>
<button (click)="patchStockForm()">Patch Price</button>
<p>Form Control value: {{ [Link] | json }}</p>
<p>Form Control status: "{{ [Link] }}"</p>
Ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from
'@angular/forms';
@Component({
selector: 'app-create-stock-reactive',
standalone: true,
imports: [CommonModule, ReactiveFormsModule],
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class CreateStockReactiveComponent {
stockForm: FormGroup;
constructor(private fb: FormBuilder) {
[Link] = [Link]({
name: ['', [Link]],
code: ['', [[Link], [Link](3)]],
price: ['', [[Link], [Link](1)]],
});
}
submitStock() {
if ([Link]) {
[Link]('Form Control value:', [Link]);
[Link]('Form Control status:', [Link]);
}
}
loadStockServer() {
const stockData = {
name: 'Stock',
code: 'SS123',
price: 100,
};
[Link](stockData);
}
patchStockForm() {
[Link]({ price: 150 });
}
}
Login
Css
/* Căn giữa toàn bộ trang */
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #e0e0e0;
}
/* Khung đăng nhập */
.login-box {
width: 360px; height: auto;
background: white; text-align: center;
padding: 40px 30px; border-radius: 20px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
}
/* Tiêu đề*/
h2 {
margin-bottom: 25px;
font-size: 22px;
font-weight: bold;
}
/* Các nhóm input */
.input-group {
margin-bottom: 20px;
text-align: left;
}
/* Nhãn */
.input-group label {
display: block;
margin-bottom: 6px;
font-weight: 500;
font-size: 14px;
}
/* Ô nhập */
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #bdbdbd;
border-radius: 5px;
outline: none;
font-size: 16px;
transition: 0.3s;
}
.input-group input:focus {
border-color: #03a9f4;
box-shadow: 0 0 5px rgba(3, 169, 244, 0.5);
}
/* Nút đăng nhập */
button {
width: 100%;
padding: 12px;
margin-top: 15px;
border: none;
background: linear-gradient(90deg, #ff00ff, #00ffff);
color: white;
font-size: 17px;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
transition: 0.3s ease-in-out;
}
button:hover {
transform: scale(1.05);
opacity: 0.9;
}
Html
<div class="login-container">
<div class="login-box">
<h2>Đăng nhập</h2>
<form (ngSubmit)="onSubmit()">
<div class="input-group">
<label for="username">Tên người dùng</label>
<input type="text" id="username" [(ngModel)]="username"
name="username">
</div>
<div class="input-group">
<label for="password">Mật khẩu</label>
<input type="password" id="password" [(ngModel)]="password"
name="password">
</div>
<button type="submit">Đăng nhập</button>
</form>
</div>
</div>
Ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms'; // Import FormsModule
@Component({
selector: 'app-login',
standalone: true,
imports: [FormsModule], // Thêm FormsModule vào đây
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class LoginComponent {
username: string = '';
password: string = '';
onSubmit() {
[Link]('Tên người dùng:', [Link]);
[Link]('Mật khẩu:', [Link]);
}
}
[Link]
[Link]
/* Căn giữa toàn bộ trang */
.stock-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #e0e0e0;
text-align: center;
}
/* Định dạng phần chứa thông tin cổphiế u */
.stock-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background: white;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.name h3, .name h4 {
display: block; /* Hiể
n thị mỗ
i thành phần trên một dòng */
margin: 5px 0;
}
.positive {
color: green;
}
.negative {
color: red;
}
button {
padding: 10px 15px;
border: none;
background-color: blue;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:disabled {
background-color: gray;
cursor: not-allowed;
}
html, body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
}
Html
<div class="stock-container">
<h1>Welcome to Stock Market App!</h1>
<div class="stock-item">
<div class="name">
<h3>{{ [Link] }}</h3>
<h4>({{ [Link] }})</h4>
</div>
<div class="price" [class]="[Link]() ? 'positive'
: 'negative'">
$ {{ [Link] }}
</div>
<button (click)="toggleFavorite($event)"
[disabled]="[Link]">
Add to Favorite
</button>
</div>
</div>
Ts
import { Component, OnInit } from '@angular/core';
import { zip } from 'rxjs';
import { Stock } from '../../model/stock';
@Component({
selector: 'app-stock-item',
standalone: true, // Sửdụng Standalone Component
imports: [],
templateUrl: './[Link]',
styleUrl: './[Link]'
})
export class StockItemComponent implements OnInit{
public stock!: Stock;
constructor() {}
ngOnInit() {
[Link] = new Stock('Test Stock Company', 'TSC', 85, 80);
}
toggleFavorite(event: Event) {
[Link]();
[Link]('We are toggling the favoriye state for this stock',
event);
[Link] = ![Link];
}
[Link]
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterModule], // Import RouterModule
template: `
<nav>
<a routerLink="/login">Login</a> |
<a routerLink="/stock">Stock</a> |
<a routerLink="/create-stock">Create Stock</a> |
<a routerLink="/create-stock--reactive">Create Stock Reactive</a>
</nav>
<router-outlet></router-outlet> <!-- Hiển thị component theo route --
>
`,
})
export class AppComponent {}
[Link]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>StockMarket</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="[Link]">
</head>
<body>
<app-root></app-root>
</body>
</html>
