Woongjae Lee
NHN Dooray - Frontend Team
2woongjae@gmail.com
// sample.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-sample',
template: `
<p>sample component</p>
`,
styles: [`
p {
color: red;
}
`]
})
export class SampleComponent {
}
// sample.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.css']
})
export class SampleComponent {
}
/*
sample.component.html
<p>sample component</p>
*/
/*
sample.component.css
p {
color: red;
}
*/
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sample2',
template: `
<p>
sample2 works!
</p>
`,
styles: []
})
export class Sample2Component implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sample3',
templateUrl: './sample3.component.html',
styleUrls: ['./sample3.component.css']
})
export class Sample3Component implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SampleComponent } from './sample.component';
import { Sample2Component } from './sample2/sample2.component';
import { Sample3Component } from './sample3/sample3.component';
@NgModule({
declarations: [
AppComponent,
SampleComponent,
Sample2Component,
Sample3Component
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sample2',
template: `
<p>
{{ after5Seconds }}
</p>
`,
styles: []
})
export class Sample2Component implements OnInit {
public after5Seconds = 'hi';
constructor() { }
ngOnInit() {
setTimeout(() => {
this.after5Seconds = 'hello';
}, 5000);
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sample2',
template: `
<p>
{{ after5Seconds }}
<button (click)="click()">클릭</button>
</p>
`,
styles: []
})
export class Sample2Component implements OnInit {
public after5Seconds = 'hi';
constructor() { }
ngOnInit() {
setTimeout(() => {
this.after5Seconds = 'hello';
}, 5000);
}
public click() {
this.after5Seconds = 'clicked';
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sample2',
template: `
<p>
{{ after5Seconds }}
<button (click)="click()">클릭</button>
<input type="text" [(ngModel)]="after5Seconds">
</p>
`,
styles: []
})
export class Sample2Component implements OnInit {
public after5Seconds = 'hi';
constructor() { }
ngOnInit() {
setTimeout(() => {
this.after5Seconds = 'hello';
}, 5000);
}
public click() {
this.after5Seconds = 'clicked';
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SampleComponent } from './sample.component';
import { Sample2Component } from './sample2/sample2.component';
import { Sample3Component } from './sample3/sample3.component';
@NgModule({
declarations: [
AppComponent,
SampleComponent,
Sample2Component,
Sample3Component
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-sample4',
templateUrl: './sample4.component.html',
styleUrls: ['./sample4.component.css']
})
export class Sample4Component implements OnInit {
@Input() input;
@Output() output = new EventEmitter();
constructor() { }
ngOnInit() {
setTimeout(() => {
this.output.emit({});
}, 2000);
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sample',
template: `<div>
<input #myInput type="text">
<button (click)="onClick(myInput.value)">Click me!</button>
</div>`,
styles: []
})
export class sampleComponent implements OnInit {
onClick(value){
console.log(value);
}
constructor() { }
ngOnInit() {
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sample',
template: `<div>
<input #myInput type="text">
<button (mouseover)="onClick($event, myInput.value)">Click me!</button>
</div>`,
styles: []
})
export class SampleComponent implements OnInit {
onClick(event, value){
console.log(event);
console.log(value);
}
constructor() { }
ngOnInit() {
}
}
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<app-sample></app-sample>
<app-sample2></app-sample2>
<app-sample3 [test]="test"></app-sample3>
<button (click)="onClick()">test</button>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-quick-start';
test = 'angular';
onClick() {
this.test = this.test + ' angular';
}
}
<p>hi {{ test }}</p>
import { Component, OnInit, Input } from '@angular/core';
import { AfterContentInit, OnChanges, AfterViewInit, AfterContentChecked, AfterViewChecked } from '@angular/core/src/metadata/lifecycle_hooks';
@Component({
selector: 'app-sample3',
templateUrl: './sample3.component.html',
styleUrls: ['./sample3.component.css']
})
export class Sample3Component implements OnInit, AfterContentInit, OnChanges, AfterViewInit, AfterContentChecked, AfterViewChecked {
@Input() test;
constructor() {
console.log('constructor');
}
ngOnChanges() {
console.log('ngOnChanges');
}
ngOnInit() {
console.log('ngOnInit');
}
ngAfterContentInit() {
console.log('ngAfterContentInit');
}
ngAfterViewInit() {
console.log('ngAfterViewInit');
}
ngAfterContentChecked() {
console.log('ngAfterContentChecked');
}
ngAfterViewChecked() {
console.log('ngAfterViewChecked');
}
}
By Woongjae Lee
코드버스킹 Angular 101 - 첫번째