[ANGULAR] TODOLista

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { TodoInputComponent } from './components/todo-input/todo-input.component';

import { TodoService } from './services/todo.service';
import { TodoItemComponent } from './components/todo-item/todo-item.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    TodoInputComponent,
    TodoItemComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [
    TodoService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }


===================================================================================
===================================================================================

app.component.ts:

import { Component } from '@angular/core';
import { TodoService } from './services/todo.service';
import { Todo } from './classes/todo';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private todoService: TodoService) {
  }
}

===================================================================================
===================================================================================

app.component.html:

<div class="App">
  <div class="todo-wrapper">
    <app-header></app-header>
    <app-todo-input></app-todo-input>
    <div *ngFor="let todo of todoService.getTodos()">
      <app-todo-item [todo]="todo"></app-todo-item>
    </div>
  </div>
</div>


===================================================================================
===================================================================================

app.component.css:

.App {
  text-align: center;
}

.todo-wrapper {
  margin: 20px auto 20px auto;
  width: 500px;
  min-height: 600px;
  border: 5px solid rgba(73, 204, 249, 1.0);
  padding: 20px;
}

===================================================================================
===================================================================================


classes/todo.ts:

export class Todo {
  id: number;
  text: string;

  constructor(id: number, text: string) {
    this.id = id;
    this.text = text;
  }
}

===================================================================================
===================================================================================

components/header/header.component.html:

<h1>Lista TODO</h1>

===================================================================================
===================================================================================

components/header/header.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

===================================================================================
===================================================================================

components/todo-input/todo-input.component.css:

.todo-input-wrapper {
  margin-bottom: 20px;
}
.btn {
  outline: none;
  box-shadow: none;
  padding: 7px;
}

.btn-primary {
  color: black;
  border-color: black;
  background-color: transparent;
}

input {
  width: 80%;
  border: 2px solid black;
  margin-right: 10px;
  padding: 5px;
  line-height: 17px;
}

input:focus {
    border: 2px solid grey;
}


===================================================================================
===================================================================================

components/todo-input/todo-input.component.html:

<div class="todo-input-wrapper">
  <input type="text" [(ngModel)]="todoText" value={{todoText}}/>
  <button class="btn btn-primary" (click)="addTodo()">Submit</button>
</div>

===================================================================================
===================================================================================

components/todo-input/todo-input.component.ts:

import { Component, OnInit } from '@angular/core';
import { TodoService } from '../../services/todo.service';

@Component({
  selector: 'app-todo-input',
  templateUrl: './todo-input.component.html',
  styleUrls: ['./todo-input.component.css']
})
export class TodoInputComponent implements OnInit {

  public todoText: string;

  constructor(private todoService: TodoService) {
    this.todoText = '';
  }

  ngOnInit() {
  }

  //dodanie zadania Todo
  private addTodo(): void {
    this.todoService.addTodo(this.todoText);
    this.todoText = '';
  }
}


===================================================================================
===================================================================================

components/todo-item/todo-item.component.css:

.todoWrapper {
  border-bottom: 1px solid #efefef;
  text-align: left;
  margin-bottom: 10px;
}
.removeTodo {
  margin-right: 20px;
  margin-bottom: 10px;
  outline: none;
  box-shadow: none;
  border-width: 2px;
  border-radius: 3px;
  border-style: solid;
  padding: 8px;
  color: rgba(203, 20, 32, 0.4);
  border-color: rgba(203, 20, 32, 0.4);
  background-color: transparent;
}

===================================================================================
===================================================================================

components/todo-item/todo-item.component.html:

<div class="todoWrapper">
  <button class="removeTodo" (click)="removeTodo()">remove</button>{{todo.text}}
</div>

===================================================================================
===================================================================================

components/todo-item/todo-item.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { Todo } from '../../classes/todo';
import { TodoService } from '../../services/todo.service';

@Component({
  selector: 'app-todo-item',
  templateUrl: './todo-item.component.html',
  styleUrls: ['./todo-item.component.css']
})
export class TodoItemComponent implements OnInit {

  @Input()
  private todo: Todo;

  constructor(private todoService: TodoService) { }

  ngOnInit() {
  }

  private removeTodo(): void {
    this.todoService.removeTodo(this.todo.id);
  }

}