Create your first Fundamental Library Application

In this blog post, you will learn how to create your first application using Fundamental Library – more specifically with Fundamental Library for Angular and Fundamental Library Styles). You can also use a working variant of the application can be found here.

We will use a few components(mainly button and alert), which should it will look like this:

You would be able to trigger different alerts by clicking on the buttons.

Prerequisites

• NPM – node package manager. Here’s more information how to install it.
• Angular – a TypeScript-based open-source web application framework
• Angular CLI – A command line interface for Angular. Here’s more information how to install the CLI.
• IDE by choice. We will be using Visual Studio Code.

Create your First Angular Application

We will be using Angular CLI command line interface to create a new angular application from scratch.

The first step is to decide where you want to create the application and open a terminal into that directory. Let’s create a new application my-cool-ngx-app with the command:

ng new my-cool-ngx-app

Then, we go in the folder of the newly created application and run it:

cd my-cool-ngx-app
ng serve

You can test whether the application is properly running by opening a browser tab at http://localhost:4200/, which should look like this:

We will delete the content of the generated application:

• Open the application with your IDE. The folder structure will look similar to:

• Open and delete the content of the file app.component.htmland save it

Bring Fundamental Libraries

In the previous section, we created a new Angular application with Angular CLI, we ran and tested it. We also deleted the template content generated with the CLI.

In this section, we will focus on bringing Fundamental Library for Angular. This will require very few steps:

Go to the folder of the application in your terminal and run the command:

ng add @fundamental-ngx/core

It will ask you to add an Animation, choose Y:

This will do a few things:

• Add @fundamental-ngx/core package to your direct dependencies into your package.json and it will install it.
• Add path of icon font and 72 font files into angular.json styles property. This will include those files as the published assets, so the application can use them.

Create the Application

The only thing you need to do now is to import and use components from Fundamental Library for Angular (Core). Let’s import modules for alert and buttonin app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { 
  ButtonModule,
  AlertModule 
} from '@fundamental-ngx/core';

import { AppComponent } from './app.component';
import { 
  BrowserAnimationsModule
} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AlertModule,
    ButtonModule,
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We can now add some content of the application in app.component.html:

<div class="wrapper">
  <button fd-button 
    [glyph]="'action'" 
    (click)="openFromComponent()">Opeb from Component</button>
  <button fd-button 
    [glyph]="'action'" 
    (click)="openFromTemplate(template)">Open from Template</button>
  <button fd-button 
    [glyph]="'action'" 
    (click)="openFromString()">Open from String</button>
  <button fd-button 
    [glyph]="'sys-cancel'" 
    [options]="'emphasized'" 
    (click)="alertService.dismissAll()"
    [disabled]="!alertService.hasOpenAlerts()">Dismiss All</button>
  <button fd-button 
    [glyph]="'palette'" 
    (click)="toggle()">Change Theme</button>
</div>

<!-- Defining a template to open -->
<ng-template let-alert #template>
    <div>{{alert.data.firstLine}}</div>
    <div>{{alert.data.secondLine}}</div>
    <button fd-button
            [fdType]="'positive'"
            [options]="'emphasized'"
            [compact]="true"
            (click)="alert.dismiss('Data passed back')">
        Click to dismiss
    </button>
</ng-template>

We are using a few buttons that will trigger different types of alert(component, template, string) and one more button for switching the themes. For that reason, we will create a new file alert-example.component.ts, which will be used to be opened as an alert content:

import { Component } from '@angular/core';
import { AlertRef } from '@fundamental-ngx/core';

@Component({
    selector: 'fd-alert-content',
    template: `
        <div>{{ref.data.label}}</div>
        <div>It will stay open when the mouse is hovered inside.</div>
        <div>Injecting AlertRef allows you to call 
          <code>dismiss()</code> 
          on the alert or access passed data.</div>
    `
})
export class AlertContentComponent {
    constructor(public ref: AlertRef) {}
}

We are using data that can be passed from the component triggering the alert. In our example this is the property label.

As a last step, we will add some logic in app.component.ts:

import { Component } from '@angular/core';
import { AlertContentComponent } from './alert-content.component';
import { AlertService } from '@fundamental-ngx/core';

@Component({
    selector: 'fd-alert-component-as-content-example',
    templateUrl: './alert-component-as-content-example.component.html',
    styleUrls: ['alert-component-as-content-example.component.scss']
})
export class AlertComponentAsContentExampleComponent {

    constructor(public alertService: AlertService) { }

    openFromComponent() {
        this.alertService.open(AlertContentComponent, {
            type: 'warning',
            minWidth: '500px',
            mousePersist: true,
            duration: 7500,
            data: {
                label: 'This alert was opened by providing a component as content!'
            }
        });
    }

    openFromString() {
        const alertContent = 'This is the content! The alert is not dismissible, but will disappear after 7500ms.';
        this.alertService.open(alertContent, {
            type: 'information',
            minWidth: '500px',
            dismissible: false,
            duration: 7500
        });
    }

    toggle(){}

    openFromTemplate(template): void {
        const alertRef = this.alertService.open(template, {
            type: 'success',
            duration: -1,
            minWidth: '500px',
            data: {
                firstLine: 'This alert passes data to the template.',
                secondLine: 'It also has [duration]="-1" and will not disappear automatically.'
            }
        });

        alertRef.afterDismissed.subscribe((data) => {
            // Do something after closing, receive data
            // You can also manually close this alert using alertRef.dismiss()
        });
    }
}

The final version of app.module.ts should look like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { 
  ButtonModule,
  AlertModule 
} from '@fundamental-ngx/core';
import { AlertExampleComponent } from './alert-example.component'

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    AlertExampleComponent
  ],
  imports: [
    AlertModule,
    ButtonModule,
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents:[AlertExampleComponent]
})
export class AppModule { }

The goal of this blog post was to introduce some of the packages from Fundamental Library.

Check out the other blog posts related to Fundamental Library.