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
You would be able to trigger different
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
Then, we go in the folder of the newly created application and run it:
You can test whether the application is properly running by opening a browser tab at
We will delete the content of the generated application:
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:
It will ask you to add an Animation, choose
This will do a few things:
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
We can now add some content of the application in
We are using a few buttons that will trigger different types of
We are using data that can be passed from the component triggering the
As a last step, we will add some logic in
The final version of
The goal of this blog post was to introduce some of the packages from
Check out the other blog posts related to
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-appThen, we go in the folder of the newly created application and run it:
cd my-cool-ngx-app
ng serveYou 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/coreIt will ask you to add an Animation, choose
Y:This will do a few things:
- Add
@fundamental-ngx/corepackage to your direct dependencies into yourpackage.jsonand it will install it. - Add path of icon font and 72 font files into
angular.jsonstyles 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.
- SAP Managed Tags:
7 Comments
