Skip to content

Instantly share code, notes, and snippets.


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';
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';
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
<mat-form-field class="example-full-width">
<input matInput placeholder="What needs to be done?" autofocus=""
[(ngModel)]="" (keyup.enter)="onAddTodo()">
View Add Material Icon
<link href="" rel="stylesheet">
View Include a theme
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
View Configure animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
imports: [BrowserAnimationsModule],