Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

A TODO list app created in Angular 2

NotificationsYou must be signed in to change notification settings

npathai/todo-angular2

Repository files navigation

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]})exportclassAppModule{}

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

<divclass="container"><divclass="col-xs-2"><ulclass="list-group"><liclass="list-group-item"></li></ul></div></div>

TASK COMPONENT TEMPLATE

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><divclass="container"><divclass="row"><divclass="col-sm-1"><!-- Checkbox --></div><divclass="col-sm-9"><!-- Form --></div><divclass="col-sm-1"><!-- delete button --><spanclass="fa fa-trash-o"style="cursor:pointer;"></span></div></div></div>

FORM Validation css

<divclass="form-group"[ngClass]="form.get('updatedTask').hasError('required') && isSubmitted ? 'has-danger' : ''"><inputtype="text"class="form-control input-sm form-control-danger"id="task"placeholder="Add a task"formControlName="updatedTask"focus/><divclass="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]})exportclassAppModule{}

Angular 2 Bootstrap + Bootstrap Styling

Using bootstrap components in Angular 2 Visit:https://valor-software.com/ng2-bootstrap/#/

About

A TODO list app created in Angular 2

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors2

  •  
  •  

[8]ページ先頭

©2009-2025 Movatter.jp