Tag: coding (Page 1 of 3)

How to Add Bootstrap to Angular CLI Project

In this article we will learn how to setup an Angular project with Bootstrap 3 or Bootstrap 4.

1: Creating an Angular project with Angular CLI

The first step is creating your Angular project using Angular CLI.

For this example we will use the following command:

ng new angular-bootstrap-example

2: Installing Bootstrap from NPM

Next, we need to install Bootstrap. Change the directory to the project we created (cd angular-bootstrap-example) and execute the following command:

For Bootstrap 3:

npm install bootstrap@3.3.7

For Bootstrap 4:

npm install bootstrap

2.1: Alternative: Local Bootstrap CSS

As an alternative, you can also download the Bootstrap CSS and add it locally to your project. I donwloaded Bootstrap from the website and created a folder styles (same level as styles.css):

 Don’t place your local CSS files under assets folder. When we do the production build with Angular CLI, the CSS files declared in the angular.json will be minified and all styles will be bundled into a single styles.css. The assets folder is copied to the dist folder during the build process (the CSS code will be duplicated). Only place your local CSS files under assets in case you are importing them directly in the index.html.

3: Importing the CSS

We have two options to import the CSS from Bootstrap that was installed from NPM:

1: Configure angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.scss"
]

2: Import directly in src/style.css or src/style.scss:

@import '~bootstrap/dist/css/bootstrap.min.css';

I personally prefer to import all my styles in src/style.css since it’s been declared in angular.json already.

3.1 Alternative: Local Bootstrap CSS

If you added the Bootstrap CSS file locally, just import it in angular.json

"styles": [
  "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
  "styles.scss"
],

or src/style.css:

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

With this setup we are able to start using the Bootstrap CSS classes in our project.

4: Bootstrap JavaScript Components with ngx-bootstrap (Option 1)

In case you don’t need to use Bootstrap JavaScript components (that require JQuery), this is all the setup you need. But if you need to use modals, accordion, datepicker, tooltips or any other component, how can we use these components without installing jQuery?

There is an Angular wrapper library for Bootstrap called ngx-bootstrap that we can also install from NPM:

npm install ngx-bootstrap --save

 ng2-bootstrap and ngx-bootstrap are the same package. ng2-bootstrap was renamed to ngx-bootstrap after #itsJustAngular.

In case you want to install Bootstrap and ngx-bootstrap at the same time when you create your Angular CLI project:

npm install bootstrap ngx-bootstrap --save

4.1: Adding the required Bootstrap modules in app.module.ts

Go through the ngx-bootstrap and add the modules needed in your app.module.ts. For example, suppose we want to use the Dropdown, Tooltip and Modal components:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  // ...
})
export class AppBootstrapModule {}

Because we call the .forRoot() method for each module (due the ngx-bootstrap module providers), the functionalities will be available in all components and modules of your project (global scope).

As an alternative, if you would like to organize the ngx-bootstrap in a different module (just for organization purposes in case you need to import many bs modules and don’t want to clutter your app.module), you can create a module app-bootstrap.module.ts, import the Bootstrap modules (using forRoot()) and also declare them in the exports section (so they become available to other modules as well).

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    CommonModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}

At last, don’t forget to import your bootstrap module in you app.module.ts.

import { AppBootstrapModule } from './app-bootstrap/app-bootstrap.module';

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrap works with Bootstrap 3 and 4. And I also made some tests and most of the functionalities also work with Bootstrap 2.x (yes, I still have some legacy code to maintain).

5: Let’s code!

Now that we have the setup for CSS and JavaScript components completed, let’s add some code to our app.component.html:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand">
              <img src="assets/img/ngx-bootstrap.svg" class="logo">
            </a>
            <span class="navbar-brand">Angular + Bootstrap</span>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">
              Link <span class="sr-only">(current)</span>
            </a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown" dropdown> <!-- {1} -->
                <a dropdownToggle role="button"> <!-- {2} -->
                  Dropdown <span class="caret"></span></a>
                <ul *dropdownMenu class="dropdown-menu"> <!-- {3} -->
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

 

Content Credits: Loiane Groner

Happy Coding!

Learn Angular be it 1,2,4 or 4+

If you are reading this post am assuming its been quite a pressure now with new languages coming in everyday. Angular is one of them, no wonder React and Vue have captured the market too but, Angular has its own pros and cons.

This post isn’t about coding, its about how and from where you can learn Angular.

So, today am gonna put in few YouTube channels here for you, where you can easily learn and follow the step by step process of Angular.

Before you start with the tutorial lets get this thing clear, for AngularJs that is Version 1 Core Javascript is essential whereas when it comes to 2 and 2+ version its all based on Typescript. So, i would recommend taking up few tutorials for typescript too before you go ahead with Angular.

AngularJs (v1) Tutorials:

Typescript Tutorials:

Angular 2 Tutorials:

Angular 4 Tutorials:

Angular 6 Tutorials:

Video Credits:

LevelUpTuts

The Net Ninja

codedamn

Alright guys thats it. All videos are from YouTube and worth watching.

Happy Coding!

10 Best Free Fonts For Websites

Well! Every now and then we come across to a situation where free font is a question. Which free font is the best? Are they good enough for my website?
So, today am listing down the best 10 free fonts that too from google.

Fonts have been picked after using them from quite some times and also keeping the readability in mind. Sequence starts from the best ones.

Font 1 : Open Sans

Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp.

Google Fonts Link Here

Font 2 : Roboto

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types. Designed by Christian Robertson

Google Fonts Link Here

Font 3 : Montserrat

The old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to design this typeface and rescue the beauty of urban typography that emerged in the first half of the twentieth century.

Google Fonts Like Here

Font 4 : Source Sans Pro

Source® Sans Pro, Adobe’s first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.

Google Fonts Link Here

Font 5 : PT Sans

PT Sans is based on Russian sans serif types of the second part of the 20th century, but at the same time has distinctive features of contemporary humanistic designs. Designed by Alexandra Korolkova, Olga Umpeleva and Vladimir Yefimov and released by ParaType in 2009.

Google Fonts Link Here

Font 6 : Lato

Lato is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the Open Font License by his foundry tyPoland, with support from Google.

Google Fonts Link Here

Font 7 : Oswald

Oswald is a reworking of the classic style historically represented by the ‘Alternate Gothic’ sans serif typefaces. The characters of Oswald were initially re-drawn and reformed to better fit the pixel grid of standard digital screens. Oswald is designed to be used freely across the internet by web browsers on desktop computers, laptops and mobile devices.

Google Fonts Link Here

Font 8 : Pontano Sans

Pontano Sans is a minimalist and light weighted Sans Serif. Pontano is designed mainly for use as a display font but is useable as a text font too. Pontano Sans has been designed to be used freely across the internet by web browsers on desktop computers, laptops and mobile devices.

Google Fonts Link Here

Font 9 : NTR

NTR is a Telugu handwriting font inspired by the artist Bapu who is famous among Telugu people. The Telugu is designed and developed by Purushoth Kumar Guttula in 2013 and made available by Silicon Andhra under the SIL Open Font License v1.1.

Google Fonts Link Here

Font 9 : Quicksand

Quicksand is a display sans serif with rounded terminals. The project was initiated by Andrew Paglinawan in 2008 using geometric shapes as a core foundation. It is designed for display purposes but kept legible enough to use in small sizes as well. In 2016, in collaboration with Andrew, it was thoroughly revised by Thomas Jockin to improve the quality.

Google Fonts Link Here

Content Source for fonts: Google Fonts

TIP: Use google fonts by importing in css to increase page speed.

For more tips and coding standards you can read this.

Happy Coding!

Page 1 of 3

Powered by DisenoBox