Angular 15 How to integrate zurb foundation CSS with example?

In this tutorial, How to integrate the zurb foundation in the Angular framework. It also includes how to add tailwind styles and Apply button components for example.

Angular is a front-end open-source framework written by Google company. It is based on writing components in the Typescript language.

Angular 15 is the recent and latest version of Google.

Zurb Foundation is a Responsive mobile First CSS framework like Bootstrap, Bulma, Angular Material, and Tailwind CSS.

The first type below command to check whether angular CLI is installed or not

ng --version

if it gives an ‘ng command not found` error, You need to install ng command is an angular CLI to create an angular application with a prototype folder structure

First, Install Angular CLI using the below command.

npm install -g @angular/cli

It installs angular CLI globally and the ng command works now.

To check whether angular CLI is installed correctly or not use the below command.

B:\blog\nodejsless>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.0.3
Node: 14.17.0
Package Manager: npm 7.11.1
OS: win32 x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1300.3
@angular-devkit/core         13.0.3
@angular-devkit/schematics   13.0.3
@angular/cli                 13.0.3
@schematics/angular          13.0.3

The next step is to create an angular application.

ng new angular-zurb-app

Create an application with default settings and create an application blueprint with the required dependencies.

Once the application is created, Please run the application.

npm run start
(or)
ng serve

#How to integrate the zurb foundation into the angular application?

ngx-foundation is npm library wrapper for foundation CSS.

First, Install ngx-foundation into the angular app.

npm i ngx-foundation

The next step is to integrate styles.

If your application is using CSS, You have to include the below CSS in index.html.

Include foundation.min.js and ngx-foundation.min.css URLs from CDN URLs.

index.html

<link
  href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.4/js/foundation.min.js"
  rel="stylesheet"
/>
<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/ngx-foundation.min.css"
  rel="stylesheet"
/>

If your application is using scss, the Following are the steps Please import ngx-foundation scss files into src/styles.scss

@import "~ngx-foundation/assets/scss/main";

It concludes the configuration of styles into the angular application.

Zurb foundation provides each UI component in angular modules.

Let’s discuss how to add a foundation button to the application.

Button styles are wrapped in ButtonModule. Let’s import ButtonModule in the Angular application app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { ButtonsModule } from "ngx-foundation";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ButtonsModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Next, add button code to app.component.html

<button type="button" class="button primary">button</button>

It shows the foundation button on the page.

#Conclusion

Step-by-step tutorial explained about

• install Angular 15 CLI
• Create a new angular application
• Integrate ngx-foundation into the angular app
• Configure foundation CSS/scss styles
• Import foundation modules
• Foundation Button example