Downloaded 12 times
![Data Binding
• Interpolation {{...}}
• Property binding [property]
• Event binding (event)
• Two-way data binding [(...)]](https://image.slidesharecdn.com/angular2withtypescript-170220171255/85/Angular-2-with-typescript-13-320.jpg)
![Structural directives
• Structural directives are responsible for HTML layout. They shape or
reshape the DOM's structure, typically by adding, removing, or
manipulating elements.
• *ngIf
• *ngFor
• [ngSwitch]
• *ngSwitchCase](https://image.slidesharecdn.com/angular2withtypescript-170220171255/85/Angular-2-with-typescript-20-320.jpg)
![Attribute directives
• An Attribute directive changes the appearance or behavior of a DOM
element.
• [ngClass]
• [ngStyle]](https://image.slidesharecdn.com/angular2withtypescript-170220171255/85/Angular-2-with-typescript-21-320.jpg)
![Data Binding
• Interpolation {{...}}
• Property binding [property]
• Event binding (event)
• Two-way data binding [(...)]](https://image.slidesharecdn.com/angular2withtypescript-170220171255/75/Angular-2-with-typescript-13-2048.jpg)
![Structural directives
• Structural directives are responsible for HTML layout. They shape or
reshape the DOM's structure, typically by adding, removing, or
manipulating elements.
• *ngIf
• *ngFor
• [ngSwitch]
• *ngSwitchCase](https://image.slidesharecdn.com/angular2withtypescript-170220171255/75/Angular-2-with-typescript-20-2048.jpg)
![Attribute directives
• An Attribute directive changes the appearance or behavior of a DOM
element.
• [ngClass]
• [ngStyle]](https://image.slidesharecdn.com/angular2withtypescript-170220171255/75/Angular-2-with-typescript-21-2048.jpg)
More Related Content
Similar to Angular 2 with typescript
Angular 2 with typescript
- 1. Angular 2 withTypeScript Tayseer Emam temam357@gmail.com
- 2. What is TypeScript •TypeScript is described as a strict super-set of JavaScript, which adds optional static typing and class-based object-oriented programming aligned with ECMAScript 6 standard proposal. • Typescript has also a transpiler that converts our Typescript code (i.e. ES6 + types) to ES5 or ES3 javascript code so we can use it in today browsers, because ES6 will take years to be fully implemented in all major browsers.
- 4. Why TypeScript • Statictype checking. • ES6 features support. • Early Error Detection. • Class-based OOP. • More structured and reusable code.
- 5. TypeScript Features • Typeannotations • Classes • Interfaces • Modules • Arrow functions • Generic types • Inheritance • And much more…
- 7. Angular 2 • Angularis a development platform for building mobile and desktop web applications. • is a complete JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications(SPA).
- 9. • Component • DataBinding • Service • Dependency Injection • Directives
- 10. Components • Component decoratorallows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed • Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components.
- 11.
- 12.
- 13. Data Binding • Interpolation{{...}} • Property binding [property] • Event binding (event) • Two-way data binding [(...)]
- 14.
- 15. Services • Services areJavaScript functions that are responsible for doing a specific task only. Angular services are injected using Dependency Injection mechanism and include the value, function or feature which is required by the application. • Refactoring data access to a separate service keeps the component lean and focused on supporting the view. It also makes it easier to unit test the component with a mock service. • You can use service inside another.
- 16. HTTP (Built inService) • Get • Post • Put • Delete
- 17.
- 18.
- 19. Directives • Components —directives with a template. • Structural directives — change the DOM layout by adding and removing DOM elements. • Attribute directives — change the appearance or behavior of an element, component, or another directive.
- 20. Structural directives • Structuraldirectives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements. • *ngIf • *ngFor • [ngSwitch] • *ngSwitchCase
- 21. Attribute directives • AnAttribute directive changes the appearance or behavior of a DOM element. • [ngClass] • [ngStyle]
- 22.
- 23.
- 24. Useful links • http://es6-features.org •https://www.typescriptlang.org/docs/tutorial.html • https://angular.io/ • https://github.com/jmcunningham/AngularJS2-Learning
- 25.