{

Angular 13 How to integrate zurb foundation CSS with example?


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

Angular is Frontend opensource framework written by Google company. It based on writing components in Typescript language.

Angular 13 is recent and latest version from google.

Zurb foundation is Responsive mobile First CSS framework like Bootstrap, Bulma, Angular material and Tailwind CSS.

First type below command to check angular cli is installed or not

ng --version

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

First Install Angular Cli using below command

npm install -g @angular/cli

This installs angular cli globally and ng command works now

To check angular cli installed correctly or not using 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

Next step is to create a angular application

ng new angular-zurb-app

Create a application with default settings and It creates application blueprint with required dependencies.

Once application is created, Please run the application

npm run start 
(or)
ng serve

How to integrate zurb foundation into angular application?

ngx-foundation is an npm library wrapper for foundation css.

First, Install ngx-foundation into angular app

npm i ngx-foundation

Next step is to integrate styles

If your application is using css, You have to include 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/ngx-foundation@1.0.8/dist/css/ngx-foundation.min.css" rel="stylesheet">

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

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

This concludes the configuration of styles into angular application.

Zurb foundation provides each UI component in angular modules.

Let’s discuss about how to add foundation button into application

Button styles are wrapped in ButtonModule. Let’s import ButtonModule in 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>

This shows foundation button in the page.

Conclusion

Step by step tutorial explained about

  • install Angular 13 cli
  • Create new angular application
  • Integrate ngx-foundation into angular app
  • Configure foundation css/scss styles
  • Import foundation modules
  • Foundation Button example
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.