October 17, 2016

Angular 2 use ngSwitch ngIf ngFor without additional DOM Element

Comment

Probably you want as little DOM elements as possible. You can use a ng-container instead of a regular HTML element in order to receive reduced markup. Example of ngSwitch:

<div class="wrap">                          <!-- <- Dom Element-->
  <ng-container [ngSwitch]="type">          <!-- <- Not a Dom Element-->
    <ng-container *ngSwitchCase="'a'">      <!-- <- Not a Dom Element-->
      <some-a-component></some-a-component> <!-- <- Dom Element-->
    </ng-container>                         <!-- <- Not a Dom Element-->
    <ng-container *ngSwitchCase="'b'">      <!-- <- Not a Dom Element-->
      <some-b-component></some-b-component> <!-- <- Dom Element-->
    </ng-container>                         <!-- <- Not a Dom Element-->
  </ng-container>                           <!-- <- Not a Dom Element-->
</div>                                      <!-- <- Dom Element-->

1

2

3

4

5

6

7

8

9

10

<ng-container [ngSwitch]="type">

<ng-container *ngSwitchCase="'a'">

<some-a-component></some-a-component>

</ng-container>

<ng-container *ngSwitchCase="'b'">

<some-b-component></some-b-component>

</ng-container>

</div>

Example for *ngIf:

<!-- no extra DOM element: -->
<ng-container *ngIf="true">
  test
</ng-container>

<!-- with extra DOM element: -->
<div *ngIf="true">
  test
</div>

1

2

3

4

5

6

7

8

9

<ng-container *ngIf="true">

test

</ng-container>

test

</div>

theCodeCampus
Developer at thecodecampus </>

October 7, 2016

Angular 2 Animate.css Tutorial – How to use Animate.CSS in NG2 Application?

4 Comments

This Article will serve as a guide to implementing Animate.css animations with Angular 2 animation system. Animate.css is a popular and handy library for simple CSS Animations. We’ll apply the animation to a component and control it via a button. We will not use ngClass but convert the Animate.css to fit Angular 2 Animate. Final Result: Git […]
READ MORE

theCodeCampus
Developer at thecodecampus </>

September 27, 2016

Angular

Angular: Set Focus on Element

14 Comments

Want to set focus on an HTML element in your Angular app? The following step-by-step tutorial shows you how to do it easily. For a live demo of the final result, see this StackBlitz. Step-by-step Let’s start by adding an input element and a button to our component’s template. We give the input element an […]
READ MORE

theCodeCampus
Developer at thecodecampus </>

September 12, 2016

Angular 2 Animate Example: Creating a Sliding Side Navigation Tutorial

37 Comments

#1 Project Setup Animations in Angular 2 are probably easier than you think. In this tutorial we will create a simple side navigation that will leave and enter the screen from the right side. We will use Angular-CLI and TypeScript but you should also be able to adopt the steps to any other […]
READ MORE

theCodeCampus
Developer at thecodecampus </>

August 17, 2016

Dynamically Render Components with ComponentFactoryResolver in Angular 2

37 Comments

In my current project I came to a situation where it was necessary to drop specific components into my view. Since the project is a game and the current view should not be tied to URLs at this point i decided not to use the router but to load my various components dynamically into my view. This gives […]
READ MORE

theCodeCampus
Developer at thecodecampus </>

July 14, 2016

Angular 2: Set up Google Analytics and Google Tag Manager

28 Comments

There are many modules to include Google Analytics into your Angular 2 project. But actually this overhead is not really required since a plain implementation is only a few lines of code. So you can spare extra modules. I highly recommend you to use Google Tag Manager in order to place the tracking information on […]
READ MORE

theCodeCampus
Developer at thecodecampus </>

June 29, 2016

Setup Ionic 2 + TypeScript Debugging with IntelliJ/WebStorm/Jetbrains IDE

7 Comments

Setting up Ionic 2 debugging is pretty easy. Above all make sure to have the “Phonegap/Cordova” Plugin installed when you want to start Ionic from Run. To do so go to Settings -> Plugins -> Install JetBrains plugin and search for “cordova”. Next step is to enable Run Cordova, go to Run -> Edit Configuration and […]
READ MORE

theCodeCampus
Developer at thecodecampus </>

June 24, 2016

JS goes mobile – Native Apps with JavaScript

2 Comments

Have you ever heard of ‘Mobile Native JavaScript‘? – No? It’s about writing native Apps with a native look & feel, but purely in JavaScript and the web technologies you love. The past We as developers had to make the hard decision, about writing a new app either native for each platforms or a hybrid […]
READ MORE

theCodeCampus
Developer at thecodecampus </>

May 25, 2016

Angular

How participants of our Angular 2 class styled the demo app

Comment

Our Angular 2 basic training adopt the successful structure of the AngularJS 1 course: Develop a fully functional demo application, step by step. Learn all the concepts by learning one and directly apply it. During developing the demo application, we neglect styling the app to fully concentrate on the core concepts of Angular 2: components, […]
READ MORE

theCodeCampus
Developer at thecodecampus </>

April 25, 2016

Setup Ionic 2 with Electron (TypeScript, Angular2)

20 Comments

Recently i faced the challenge to create a cross platform application for desktop, mobile and browser. Since Angular 2 Material is not yet ready but a Angular 1 to Angular 2 migration would be a pain in the ass I decided to go with Ionic 2 as scaffold for all devices. And then, when Angular 2 […]
READ MORE

theCodeCampus
Developer at thecodecampus </>