Skip to content

Instantly share code, notes, and snippets.

Avatar

Panuphan Chaimanee cpanuphan

  • BananaCoding
  • Chiangmai Thailand
View GitHub Profile
View todo-add.component.css
h1 {
text-align: center;
}
.example-full-width {
width: 100%;
}
View todo-add.component.ts
import { Component } from '@angular/core';
import { TodoItem } from '../todo-item';
@Component({
selector: 'app-todo-add',
templateUrl: './todo-add.component.html',
styleUrls: ['./todo-add.component.css']
})
export class TodoAddComponent {
View import MatInputModule
import {MatInputModule} from '@angular/material';
@NgModule({
...
imports: [MatInputModule],
...
})
View todo-item.ts
export class TodoItem {
id: number;
name: string;
isComplete: boolean;
constructor(values: Object = {}) {
Object.assign(this, values);
}
}
View todo-add.component.html
<h1>Todos</h1>
<mat-form-field class="example-full-width">
<input matInput placeholder="What needs to be done?" autofocus=""
[(ngModel)]="newTodo.name" (keyup.enter)="onAddTodo()">
</mat-form-field>
View Add Material Icon
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
View Include a theme
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
View Configure animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [BrowserAnimationsModule],
...
})
You can’t perform that action at this time.