Fuse

Fuse applications created through McFly-ng2 are not just Fuse applications--they utilise ng2-Fuse to bring the power of Angular to your mobile application without the decreased performance associated with WebViews. Using Angular 2 with Fuse is surprisingly easy; Fuse markup is based on XML and Angular 2 is used with it quite similarly to its use with HTML.

Components and .ngux

The .ngux file will be the template for the .ts component and must be set as the template in the same way one would set an .html file as the template. However, components are also bound to ux elements by setting the attribute ng:Selector equal to the selector specified in the component's .ts file, as in:

<Panel ng:Selector="login-page">
  <Button Text="login" (Click)="login()" />
</Panel>

This allows the ux element access to component properties. The Angular-Fuse component may then be used in .ngux markup like so:

<StackPanel>
  <ng:login-page></ng:login-page>
</StackPanel>

Styling

ng2-Fuse markup is styled using standard Fuse attributes.

*ngIf and *ngFor

*ngIf and *ngFor are used exactly as they would be when using an html template with Angular. Fuse's Each attribute should not be used.

Note that if dynamically generated content, such as that created by an *ngFor, is put in a container with fixed/static content, the dynamic content will appear before/above the static content. This may be resolved by isolating the dynamic content in its own container.

Interpolation

In ng2-Fuse data can be bound from the scope to the markup in two ways. Simple insertion of scope variables can be accomplished by using double curly braces, as in:

<Text Value="{{foo}}" />

However, Angular expressions can be inserted by putting square brackets around the ux attribute, as in:

<Text [Value]="foo + ' is a great placeholder.'" /> or <Text [Value]="'Your order total is: ' + quantity * price" />.

Event binding

Angular expressions can be bound to Fuse events by enclosing the Fuse attribute in parens, as in:

<Button Text="Submit" (Clicked)="submitData(data)" />.

Routing

Angular-Fuse components to be made available to the router must be placed within the <router-outlet>, as in:

<router-outlet>
  <ng:login-page></ng:login-page>
  <ng:home-page></ng:home-page>
</router-outlet>

Route paths and corresponding components must still be defined in the Angular application and navigated to using Angular's navigate function.