Small Discussion about ng-bootstrap?

What is Ng-Bootstrap?

ng-bootstrap is angular directives specific to the Bootstrap 4.
ng-bootstrap is a set of components and directives that wrap the latest version of Bootstrap.This makes it easy to use Bootstrap in your Angular apps.
ng-bootstrap depends on Bootstrap’s CSS being available, but you don’t need the Bootstrap JS or jQuery dependencies.

Npm Command

npm install --save @ng-bootstrap/ng-bootstrap

Example

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}

Video for ng-bootstrap

Small Discussion About Prime NG?

What is Prime NG?

PrimeNG is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License. PrimeNG is developed by PrimeTek Informatics, a vendor with years of expertise in developing open source UI solutions.

Features

70+ COMPONENTS
OPEN SOURCE
PRODUCTIVITY
THEMES
TEMPLATES
MOBILE

NPM Setup

npm install primeng --save

It is a very young component library, the development started on January 2016. The development speed is pretty quick and many of the most useful components from PrimeFaces and PrimeUI are already available in PrimeNG. The 1.0 Final version is said to be delivered on 23rd of November.

PrimeNG at the current state of development provides a lot of ready to use components like DataTables, TreeTables, Dialogs, Menus, Charts, Drag&Drop functionality, Inputs (switches, dropdowns, spinners toggles ...) and many more.

Nevertheless, PrimeNG supports JQuery Theme Rolles, so there are many free themes available to customize the look and feel of your application.

Video for Prime NG

https://www.youtube.com/watch?v=yzhARGULsVQ

Discussion About Angular 2 Directives?

What are Angular Directives?

Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

Directives Types

Components
Structural Directives
Attribute Directives

1. Components

Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at runtime.

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

@Component({
selector: 'myApp',
template: `<h1>Query Home</h1>`
})
class homePage{
}

2. Structural Directives

Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

As with other directives, you apply a structural directive to a host element. The directive then does whatever it's supposed to do with that host element and its descendants.

Example

<div *ngIf="isPageEnable" class="app-name">Query Home</div>

3.Attribute Directives

Attributes directives are responsible for change the appearance or behavior of an element, component, or another directive.

Example

<p appHighlight>Highlight me!</p>

Video for Directives

https://www.youtube.com/watch?v=PiJkT3VNTS8

Small Discussion About Angualr UI Bootstrap?

What is UI Bootstrap?

UI Bootstrap is an extended bootstrap framework in an angular way.

Bootstrap components written in pure AngularJS by the AngularUI Team

These are built by the AngularUI team that adds many components to extend Angular. The UI Bootstrap doesn't use jQuery and are directives built from the ground up for each of the Bootstrap JS components.

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required,

UI Bootstrap Directive List

Accordion
Alert
Buttons
Carousel
Collapse
Datepicker
Dropdown
Modal
Pagination
Popover
Progressbar
Rating
Tabs
Timepicker
Tooltip
Typeahead

Steps to Installation to Angular

angular.module('myModule', ['ui.bootstrap']);

Read More : https://angular-ui.github.io/bootstrap/#/getting_started

Video for UI Bootstrap

https://www.youtube.com/watch?v=DEWIlo8IS8E

Small Discussion about Thingspeak?

What is ThingSpeak?

ThingSpeak is an open-source Internet of Things (IoT) application and API to store and retrieve data from things using the HTTP protocol over the Internet or via a Local Area Network.ThingSpeak was originally launched by ioBridge in 2010 as a service in support of IoT applications.
ThingSpeak™ is an IoT analytics platform service that allows you to aggregate, visualize and analyze live data streams in the cloud.

ThingSpeak provides instant visualizations of data posted by your devices to ThingSpeak. With the ability to execute MATLAB® code in ThingSpeak you can perform online analysis and processing of the data as it comes in. ThingSpeak is often used for prototyping and proof of concept IoT systems that require analytics.

ThingSpeak allows you to aggregate, visualize and analyze live data streams in the cloud.

Some of the key capabilities of ThingSpeak include the ability to

Easily configure devices to send data to ThingSpeak using popular IoT protocols.
Visualize your sensor data in real-time.
Aggregate data on-demand from third-party sources.
Use the power of MATLAB to make sense of your IoT data.
Run your IoT analytics automatically based on schedules or events.
Prototype and build IoT systems without setting up servers or developing web software.
Automatically act on your data and communicate using third-party services like Twilio® or Twitter®.

Video for Thingspeak

https://www.youtube.com/watch?v=2XH1bTWkWIE

Small Discussion about Minikube?

What is Minikube?

Minikube is a tool that makes it easy to run Kubernetes locally. Minikube runs a single-node Kubernetes cluster inside a VM on your laptop for users looking to try out Kubernetes or develop with it day-to-day.

Minikube supports Kubernetes features such as:

DNS
NodePorts
ConfigMaps and Secrets
Dashboards
Container Runtime: Docker, rkt, CRI-O and containerd
Enabling CNI (Container Network Interface)
Ingress

When using a single VM of Kubernetes, it’s really handy to reuse the Minikube’s built-in Docker daemon; as this means you don’t have to build a docker registry on your host machine and push the image into it -

We can just build inside the same docker daemon as minikube which speeds up local experiments. Just make sure you tag your Docker image with something other than ‘latest’ and use that tag while you pull the image. Otherwise, if you do not specify version of your image,

it will be assumed as :latest, with pull image policy of Always correspondingly, which may eventually result in ErrImagePull as you may not have any versions of your Docker image out there in the default docker registry (usually DockerHub) yet.

Video for Minikube

https://www.youtube.com/watch?v=dhJi5_J7ztY

Small Discussion about ng-bootstrap?

References

Your comment on this post:

Related Articles