A Collapsable Panel component in Angular 2 and Angular 1.5

In my previous post New .component(…) method in Angular 1.5 I shared a snippet to create a simple CollapsablePanel component using the new .component() method available in Angular 1.5.
Now I’m simply showing you how to write the same component in Angular 2 and TypeScript.

Angular 2 is currently in beta 0 and the syntax may change

Live demo


Open fullpage Plunker

Angular 2 Source Code

App.ts

This is the main application file and it’s used to create two instances of the panel component: the first one uses static data while the second gets its data from the class properties.

Panel.ts

This component simply toggles the hide class to the body when the header is clicked and should be a good starting point to understand how to write components in Angular 2: binding, transclusion, mouse events, dynamic styling, component methods and properties.

Try in Plunker


Comparison with Angular 1.5

In the following code you can see the same component created in .component method available in Angular 1.5.
This snippet is part of the article “New .component(…) method in Angular 1.5

App.js

Panel.js

Fabio Biondi

I am an italian developer with over 10+ years of experience in developing custom user interfaces and interactive applications for any screen and device using the latest web technologies - HTML5, SVG, Canvas, ES2015, CSS3 - the latest libraries - React, AngularJS, D3.js, CreateJS - and many other tools - Gulp, WebPack, LESS/SASS but also Sketch, Balsamiq, PS and AI.