Choosing the wrong domain name or free domain. Picking the right domain name based on niche will help Visitors to remember easily & relate with content.
Mixing up niche
Don’t mix up the blog topics too much. Decide your niche clearly. If your blog is focused on programming, food or lifestyle. Mixing up niche will discourage recurring visitors. If you really want to cover multiple niche – maintain proper category.
Write consistently
Consistency is the key. Make proper plan, write and schedule the Content. If you can write one post in a week or two week. Just go with it and schedule post accordingly. One of my favorite blogger posts Content on every Tuesday and Friday.
Copying content without giving credits
If you are referring and copying a part of sentence from another site. Give proper credits in your post. And also never copy paste entire content. Respect others work.
Never to hesitate to write small post
Never hesitate to write “How To” kind of post. If it solves a rare problem, even if it is a small post. It will get more traction. Even my blog have such kind of posts which gains me more traffic and tops at Google search.
Avoid grammatical mistakes
N number of online free tools available to check the spelling mistakes and grammatical mistakes. I myself did these kind of mistakes at start of my blogging journey. Sometimes my friends read it and message me to correct it.
Have your own style of writing
Prepare your own way of presentation. Design your own content delivery technique and the social media sharing schedules.
If you are already familiar with the Angular framework. This tutorial will be a step by step process on how to add bootstrap style to your application.
If you are a beginner, this post will be an introduction session. – on how to create an angular application with angular CLI. And add bootstrap style to your application.
What is angular?
A framework for building client application in HTML, CSS and JavaScript/TypeScript.
Why Angular?
Why do we need to learn Angular? We can do the same in JavaScript or jQuery. Yes, we can complete most of the tasks using jQuery.
When the application becomes complex requirements, jQuery becomes hard to maintain the code.
We have lots of design patterns for JavaScript, but it’s hard for a beginner to start with design patterns.
When we create large complex applications using jQuery – it becomes hard to test. To make life easier a lot of frameworks arrived in the programming world to help the programmers.
A quick start tool always helps the developer to save their valuable time. And use those times in an efficient way of improving the quality of the application.
Angular provides us Angular CLI – which is a command-line interface tool.
Angular CLI can help to
create a project
add files
perform a variety of ongoing development tasks
testing
bundling
deployment
Using this CLI, we can create apps with a working condition that uses best practices suggested by Angular Team.
To create an Angular application using Angular CLI, all we need is to follow the below steps:
1. Install Node js and npm on your machine
Visit Node.js web page and download the installer. Once you’ve installed nodejs, the npm will get installed along with it.
2. Verify the compatible version
Angular CLI requires the minimal version of node and npm. But feel free to install the latest edition to explore the latest features.
We can check the version of the node and npm using the following commands.
node -vnpm -v
3. Install Angular CLI
Run the following command to install Angular CLI globally.
npm install -g @angular/cli
-g flag is used to install the package globally in the npm.
Once we installed CLI globally, we can confirm whether the tool installed by using the following command.
Angular CLI is one of the best tools available for angular.To set up the initial files or scaffolding structure of the application.
Setup
Once you have set up the basic software like node.js and npm. You can download CLI using the following command
npm install -g @angular/cli
Once installed we can check the version of angular CLI using the following command
ng version
One common argument every CLI has is help command. Here it is for you ng help
Create a new Angular App
From your target empty folder, you need to run the following command to generate the basic files
ng new ng-bootstrap-demo
Make sure to replace ‘ng-bootstrap-demo’ with the name you prefer. This is will your application name.
Angular CLI has lots of other options to help in setting the basic to advance files.
The CLI asks us to choose our required options based on our needs. Like routing and stylesheet type.
After installing the package, we are good to go with the debugging the new application.
You can check out some of our other posts related to angular CLI
Serving the project
Angular CLI provides a complete tool-chain for developing front-end apps. As such, you don’t need to install a local server to serve your project.You can simply, use the ng serve command from your terminal to serve your project locally.
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
We are going to use bootstrap in this tutorial but in a different way.
We’ll be using ng-bootstrap.
Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem. No dependencies on 3rd party JavaScript.
Installation of ng-bootstrap
Before installing ng-bootstrap, let’s install bootstrap from npm.
Install bootstrap
npm install bootstrap
Add Bootstrap CSS or SCSS to your project
/* update your 'styles.css' with */
@import '~bootstrap/dist/css/bootstrap.css';
/* or your 'styles.scss' with */
@import "~bootstrap/scss/bootstrap";
The good news is we don’t have to add any bootstrap js to make an application now.
This is where ng-bootstrap comes into picture.
The goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code.
Add ng-bootstrap
Installing from npm
npm install @ng-bootstrap/ng-bootstrap
Add ng-bootstrap module to main module
Once installed you need to import ng-bootstrap main module and you’re good to go
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Alternatively you could only import modules with components you need, ex. pagination and alert. The resulting bundle will be smaller in this case.
import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
...
imports: [NgbPaginationModule, NgbAlertModule, ...],
...
})
export class YourAppModule {
}
All set!
We have added all basic needs of using bootstrap with angular.
Now let’s add some bootstrap components into application.
The Carousel component allows you to a display a selection of rotating images with a title, brief description and link to an associated story, event, program or project page elsewhere in your site.
Right now, app component contains default code generated by the CLI.
We are going to replace that code with carousel code as follows
<div class="container-fluid">
<ngb-carousel *ngIf="images">
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="images[0]" alt="Random first slide">
</div>
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="images[1]" alt="Random second slide">
</div>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="images[2]" alt="Random third slide">
</div>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, nisl consectetur.</p>
</div>
</ng-template>
</ngb-carousel>
</div>
Carousels needs some images to display.
So we are going to pass the image Urls from app.compnent.ts
The carousel will have controls to switch to next image as show in diagram.
The main reason behind using ng-bootstrap is – we don’t have write any scripts to perform these operations.
Tabset
This is a default tabset.
We can swtich between content and even disable content based on needs.
<ngb-tabset [destroyOnHide]="false">
<ngb-tab title="Simple">
<ng-template ngbTabContent>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
<ng-template ngbTabContent>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
<p>Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table
craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl
cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean
shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero
sint qui sapiente accusamus tattooed echo park.</p>
</ng-template>
</ngb-tab>
<ngb-tab title="Disabled" [disabled]="true">
<ng-template ngbTabContent>
<p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
</ng-template>
</ngb-tab>
</ngb-tabset>
Tabset Output
Date Picker
A simple picker requires lots of code when we are using basic HTML and Javscript.
Modern frameworks reduces a lots of code by introducing reusable components.