todo-angular2
A TODO list app created in Angular 2
STEP 1 : Set up the Development Environment
Install Node.js® and npm if they are not already on your machine
Visit : https://nodejs.org/en/download/
STEP 2 : Install Angular CLI
npm install -g @angular/cli
STEP 3 : Create a new Project
ng new my-application
STEP 4 : Serve the application
cd my-app ng serve --open [ or ng serve -o ]
To Generate Service Form CLI
ng g service servicename
BOOTSTRAP INTEGRATION
1) Open below link
Visit : https://ng-bootstrap.github.io/#/home
2) Click on Installation button
3) Installation
npm install --save @ng-bootstrap/ng-bootstrap
4) Once installed you need to import our main module
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';5) Need to add imports in AppModule
Example :
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...], // forRoot is used to add application/singleton services.
bootstrap: [AppComponent]
})
export class AppModule {
}6) Install bootstrap (Using only for CSS reference)
npm install bootstrap@4.0.0-alpha.6
7) Add css link to .angular-cli.json file
Example :
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
]TODO COMPONENT TEMPLATE
<div class="container">
<div class="col-xs-2">
<ul class="list-group">
<li class="list-group-item">
</li>
</ul>
</div>
</div>TASK COMPONENT TEMPLATE
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-sm-1">
<!-- Checkbox -->
</div>
<div class="col-sm-9">
<!-- Form -->
</div>
<div class="col-sm-1">
<!-- delete button -->
<span class="fa fa-trash-o" style="cursor:pointer;"></span>
</div>
</div>
</div>FORM Validation css
<div class="form-group" [ngClass]="form.get('updatedTask').hasError('required') && isSubmitted ? 'has-danger' : ''">
<input type="text" class="form-control input-sm form-control-danger" id="task" placeholder="Add a task" formControlName="updatedTask" focus/>
<div class="form-control-feedback" \*ngIf="form.get('updatedTask').hasError('required') && isSubmitted">
Task name is required
</div>
</div>STRIKETHROUGH CSS
<span [ngClass]="task.isDone ? 'task-done' : 'task'" (click)="enableEditing()" \*ngIf="!editable" style="cursor:pointer;" >
</span>How to make DRAG & DROP TODO
1) Install DndModule
`npm install ng2-dnd --save`
2) Update App.module.ts
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from '@angular/core';
import {DndModule} from 'ng2-dnd';
@NgModule({
imports: [
BrowserModule,
DndModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule {
}Angular 2 Bootstrap + Bootstrap Styling
Using bootstrap components in Angular 2 Visit: https://valor-software.com/ng2-bootstrap/#/