Author: therichpost

Add Bootstrap in Angular 8
Hello to all, welcome to therichpost.com. In this post, I will tell you, Add Bootstrap in Angular 8.

Here is simple example to Add Bootstrap to Angular 8 application. Angular 8 has been reached now and I have shared few posts related to this and you can check that with refer below link:

Angular 8 Latest Posts

Here is the working picture:

Add Bootstrap in Angular 8

Here are the following steps to add Bootstrap to Angular 8 application:

1. First you need to run below command into your terminal to include bootstrap into your angular 8 app:
```
npm install --save bootstrap
```
2. Now add below code into your src/styles.css:
```
@import '~bootstrap/dist/css/bootstrap.min.css';
```
3. Now finally add below html to see working bootstrap into your app.component.html file:
```
<div class="container">
  <table class="table table-striped">
    <thead class="thead-light">
      <tr>
        <th>Name</th>
        <th>Department</th>
        <th>Experience</th>        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajay</td>
        <td>Angular</td>
    <td>4 yrs</td>
      </tr>
    </tbody>
  </table>
</div>
```
Run ng serve –open command and see working bootstrap into your angular 7 application.

This is it, this is very simple and if you have any query related to this post, then please do comment below or ask question.

Thank you,

Nanu,

TheRichPost
October 7, 2019

Angular 8 with mysql database working example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 with mysql database working example.

I have shared many posts related to Angular 8 and you all loved it very much so today I came up with new post related to angular 8 and php mysql database combination.

In this post, I am getting the data from php mysql database to angular 8.

phpmysql data in angular 8 — php mysql data in angular 8

Here are complete code snippets and please all this into your files very carefully:

1. Let start, here are the basics commands to set Angular 8 into your pc:

npm install -g @angular/cli //Setup Angular8 atmosphere

ng new angular8phpmyadmindatabse //Install New Angular App

/**You need to update your Nodejs also for this verison**/

cd angular8phpmyadmindatabse //Go inside the Angular 8 Project

2. After come inside angular8phpmyadmindatabse folder, please add below code into angular8phpmyadmindatabse\src\app\app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

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

3. Now add below code into angular8phpmyadmindatabse\src\app\app.component.ts file:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular8phpmyadmindatabse';
  data = [];
  constructor(private http: HttpClient) {
    this.http.get('http://localhost/employee.php').subscribe(data => {
    this.data.push(data);
    console.log(this.data);
   
    
    }, error => console.error(error));
  }
}

4. Now add below code into angular8phpmyadmindatabse\src\app\app.component.html file:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    
  </tr>
  <tr *ngFor="let mydata of data[0]">
    <td>{{mydata.name}}</td>
    <td>{{mydata.email}}</td>
  </tr>

5. For good looks, add below code into app.component.css file:

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }

6. Finally for mysql data, please add below code into employee.php file into your htdocs folder and don’t forget to start your XAMPP:

<?php
$servername = "localhost";
$username   = "root";
$password   = "";
$dbname     = "employee";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

  //echo "Connected successfully";
$sql = "SELECT * FROM emplyee";
$result = mysqli_query($conn,$sql); 
$myArray = array();
if ($result->num_rows > 0) {
// output data of each row
    while($row = $result->fetch_assoc()) {
        $myArray[] = $row;
    }
    print json_encode($myArray);
} 
else 
{
    echo "0 results";
}
?>

In the end, don’t forget to run ng serve command into your terminal.

If you have any kind of query related to this post or related to Angular then please contact me or comment below.

Jassa Jatt

Angular Expert

Thank you

October 5, 2019

Laravel 6 vue bootstrap owl carousel working example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Laravel 6 vue bootstrap owl carousel working example.

Vue Laravel Bootstrap Owl Carousel Working Example

Here are the basics steps and coding and please use this carefully:

1. Before using Laravel, make sure you have Composer installed on your machine.

2. Now run below command to download laravel installer:

composer global require laravel/installer

3. Here are the basics command to install fresh laravel 6 setup on your machine:

composer create-project --prefer-dist laravel/laravel vuelaraveowlcarousel

cd vuelaraveowlcarousel // go inside laravel 6 setup

npm install // for node setup

4. Now, you need to add below code into resources\js\app.js file:

...

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

...

5. Now, you need to add below code into resources\js\components\ExampleComponent.vue file:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                 <center><h2>Vue Laravel Bootstrap Owl Carousel Working Example:</h2></center>  
         <div id="demo" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="carousel-item active">
            <img src="https://responsivedesign.is/wp-content/uploads/2016/11/Owl-Carousel-2_ri92wj.jpg" alt="Los Angeles" style="width:100%;">
            </div>

            <div class="carousel-item">
            <img src="https://responsivedesign.is/wp-content/uploads/2016/11/Owl-Carousel-2_ri92wj.jpg" alt="Chicago" style="width:100%;">
            </div>
          
            <div class="carousel-item">
            <img src="https://responsivedesign.is/wp-content/uploads/2016/11/Owl-Carousel-2_ri92wj.jpg" alt="New york" style="width:100%;">
            </div>
          </div>

          <!-- Left and right controls -->
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
            </a>
          </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

6. Now, you need to add below code into resources\views\welcome.blade.php file:

<div id="app"><example-component></example-component></div>
<script src="{{asset('js/app.js')}}"></script>

7. Finally, you need to run below command into your terminal and you will see working full calendar example:

//In first terminal run
npm run watch

//In second terminal run
php artisan serve

And you will see working bootstrap owl carousel in laravel 6 vue and if you have any query regarding to this post then please do comment below.

Jassa Jatt

Thank you

September 29, 2019

Angular 8 custom accordion working example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 custom accordion working example.

I really enjoyed this code and hope this code snippet will help you. If I will get good reviews on this then I will come with more code snippets.

Here is working code snippet and please use this carefully:

1. Let start, here are the basics commands to set Angular 8 into your pc:

npm install -g @angular/cli //Setup Angular8 atmosphere

ng new angularlatest8 //Install New Angular App

/**You need to update your Nodejs also for this verison**/

cd angularlatest8 //Go inside the Angular 8 Project

2. After done with above commands, you need to run below command to get jquery into your angular 8 application:

npm install jquery --save

3. Now, you need to add below jquery file path into your Angular 8 application angular.json file:

....

"scripts": ["node_modules/jquery/dist/jquery.js"]
....

4. Now add below code into app.component.ts file:

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  

  title = 'angulardatatables';
  dtOptions: DataTables.Settings = {};
  ngOnInit() {
    $(".toggle h3").click(function(e){
            e.preventDefault();
            if($(this).closest("div").find("div:first").css("display")=="none")
            {   
                $(this).closest("div").find("div:first").show();
                $(this).closest("div").find(".plus").text("-");
                $(this).closest("div").find(".plus").css("background", "#ffffff");
                $(this).closest("div").find(".plus").css("color", "#000");
                $(this).closest("div").find("h3").css("background", "#4CAF50");
                
            }
            else
            {
                $(this).closest("div").find("div:first").hide();
                $(this).closest("div").find(".plus").text("+");
                $(this).closest("div").find(".plus").css("background", "#888888");
                $(this).closest("div").find(".plus").css("color", "#fff");
                $(this).closest("div").find("h3").css("background", "#f3f3f3");
            }
            
            
        })
}
}

5. Now add below code into app.component.html file:

I added Bootstrap CDN because to make good looks and we can also add it programmatically:

<div class="jumbotron text-center">
  <h1>Custom Accordian</h1>
  <p>jQuery Bootstrap Accordian</p> 
</div>
<div class="container">		
    <div class="row">
            <div class="col-sm-6">
                <div class="toggle mb-2"><h3><span class="plus">+</span><a href="#">Lorem Ipsum is simply dummy text of the printing.</a></h3>
                    <div style="display: none;">
                        <div class="wpb_text_column wpb_content_element">
                            <div class="wpb_wrapper">
                                <p>Lorem Ipsum is simply dummy text of the printing.:</p>
                                <ul>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
                 <div class="toggle mb-2"><h3><span class="plus">+</span><a href="#">Lorem Ipsum is simply dummy text of the printing.</a></h3>
                    <div style="display: none;">
                        <div class="wpb_text_column wpb_content_element">
                            <div class="wpb_wrapper">
                                <p>Lorem Ipsum is simply dummy text of the printing.:</p>
                                <ul>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
                 <div class="toggle mb-2"><h3><span class="plus">+</span><a href="#">Lorem Ipsum is simply dummy text of the printing.</a></h3>
                    <div style="display: none;">
                        <div class="wpb_text_column wpb_content_element">
                            <div class="wpb_wrapper">
                                <p>Lorem Ipsum is simply dummy text of the printing.:</p>
                                <ul>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="toggle mb-2"><h3><span class="plus">+</span><a href="#">Lorem Ipsum is simply dummy text of the printing.</a></h3>
                    <div style="display: none;">
                        <div class="wpb_text_column wpb_content_element">
                            <div class="wpb_wrapper">
                                <p>Lorem Ipsum is simply dummy text of the printing.:</p>
                                <ul>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
      
      <div class="col-sm-6">
                <div class="toggle mb-2"><h3><span class="plus">+</span><a href="#">Lorem Ipsum is simply dummy text of the printing.</a></h3>
                    <div style="display: none;">
                        <div class="wpb_text_column wpb_content_element">
                            <div class="wpb_wrapper">
                                <p>Lorem Ipsum is simply dummy text of the printing.:</p>
                                <ul>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
                 <div class="toggle mb-2"><h3><span class="plus">+</span><a href="#">Lorem Ipsum is simply dummy text of the printing.</a></h3>
                    <div style="display: none;">
                        <div class="wpb_text_column wpb_content_element">
                            <div class="wpb_wrapper">
                                <p>Lorem Ipsum is simply dummy text of the printing.:</p>
                                <ul>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
                 <div class="toggle mb-2"><h3><span class="plus">+</span><a href="#">Lorem Ipsum is simply dummy text of the printing.</a></h3>
                    <div style="display: none;">
                        <div class="wpb_text_column wpb_content_element">
                            <div class="wpb_wrapper">
                                <p>Lorem Ipsum is simply dummy text of the printing.:</p>
                                <ul>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="toggle mb-2"><h3><span class="plus">+</span><a href="#">Lorem Ipsum is simply dummy text of the printing.</a></h3>
                    <div style="display: none;">
                        <div class="wpb_text_column wpb_content_element">
                            <div class="wpb_wrapper">
                                <p>Lorem Ipsum is simply dummy text of the printing.:</p>
                                <ul>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                    <li><strong>Lorem Ipsum</strong>: Lorem Ipsum is simply dummy text of the printing.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
    </div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

6. Now add below code into app.component.css file:

.toggle h3 a{color:#000; text-decoration:none;}
.toggle h3{background: #f3f3f3;padding: 14px 14px 16px 16px;font-size: 14px;cursor:pointer;margin-bottom:0px;width: 100%;transition: 0.4s;}
.toggle h3 a{display: block;margin-top: 3px;}    
.plus{width: 20px;background: #888;color: #fff;border-radius: 100%;padding: 1px;height: 20px;display: block;float: left;margin-right: 11px;text-align: center;
line-height: 19px;}
.toggle >div {padding: 10px 14px;font-size:16px;border-top: 0px;display: none;background-color: #fff!important;box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);-o-box-shadow: 0 1px 2px rgba(0,0,0,0.2);transition: height .35s ease-in-out;}

In the end, don’t forget to run ng serve command to taste the output.

Jassa

Thank you.

September 26, 2019

Angular 8 routing working example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 routing working example.

If you are new in Angular then you can also check my old post related to Angular 8 and Angular 7.

Here is the complete code and please use this carefully:

1. Let start, here are the basics commands to set Angular 8 into your pc:

$ npm install -g @angular/cli //Setup Angular8 atmosphere

$ ng new angularlatest8 //Install New Angular App

/**You need to update your Nodejs also for this verison**/

$ cd angularlatest8 //Go inside the Angular 8 Project

2. After Install Angular 8 fresh setup and go inside the Angular 8 setup, run below command into your terminal for creating new angular components:

ng g component aboutus

ng g component contactus

3. After done with above commands and angular 8 setup and add below code into app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Routes, RouterModule } from '@angular/router';
import { AboutusComponent } from './aboutus/aboutus.component';
import { ContactusComponent } from './contactus/contactus.component';

const appRoutes: Routes = [
    { path: 'aboutus', component: AboutusComponent },
  { path: 'contactus', component: ContactusComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    AboutusComponent,
    ContactusComponent
  ],
  imports: [
    BrowserModule,
  BrowserAnimationsModule, 
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )	
  ],
  entryComponents: [AppComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Now add below code into app.component.html file:

<nav class="navbar navbar-expand-sm bg-light">
  <ul class="nav nav-pills">
      <li class="nav-item"><a class="nav-link" routerLinkActive="home" [routerLinkActiveOptions]="{exact: true}" routerLink="/">Home</a></li>
      <li class="nav-item"><a class="nav-link"  routerLinkActive="aboutus" [routerLinkActiveOptions]="{exact: true}" routerLink="/aboutus">About Us</a></li>
      <li class="nav-item"><a class="nav-link"  routerLinkActive="contactus" [routerLinkActiveOptions]="{exact: true}" routerLink="/contactus">Contact Us</a></li>
  </ul>
</nav>
<br>

<div class="container-fluid">
<h3><router-outlet></router-outlet></h3>
</div>

5. Finally add below code into app.component.css file:

.nav-pills{margin: 0;padding: 25px 0 42px;background: #eee;}
.nav-pills li{float: left;margin: 0 0 0px 38px;list-style-type: none;}
.container-fluid{background: #eee;padding: 20px 30px;}
.home{color:red!important}
.aboutus{color:yellow!important}
.contactus{color:green!important}

In the end, don’t forget to run ng serve command to see final working output.

If you have any query then please comment below.

Jassa Jatt

Thank you

September 24, 2019

Angular 8 Datatable Working Example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 Datatable Working Example.

Angular 8 has just launched and it is in very high in demand. Angular 8 increased his performance speed. I am showing the data in Datatables with custom json data and also for giving good look to datatable, I have used bootstrap in it, here is the working picture and don’t forget to install latest node version.

Angular 7 Datatables Working Example — Angular 8 Datatable Working Example

Here is the complete working code and use this carefully:

1. Here are the basics commands, you need to run for latest angular 8 setup and environment:

$ npm install -g @angular/cli

$ ng new angulardatatables

$ cd angulardatatables

$ ng serve

//Here is the url, you need to run into your browser and see working angular test project
http://localhost:4200/

2. Here are the basics commands, you need to run into your terminal for datatable and its dependencies:

npm install jquery --save

npm install datatables.net --save

npm install datatables.net-dt --save

npm install angular-datatables --save

npm install @types/jquery --save-dev

npm install @types/datatables.net --save-dev

npm install ngx-bootstrap bootstrap --save

3. After done with commands add below code into you angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
            ],
            "scripts": [
            "node_modules/jquery/dist/jquery.js",
            "node_modules/datatables.net/js/jquery.dataTables.js",
            "node_modules/bootstrap/dist/js/bootstrap.js",
            ]
...

4. Now add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DataTablesModule} from 'angular-datatables';
import { AppComponent } from './app.component';

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

5. Now add below code into app.component.ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public data = [
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
];

  title = 'angulardatatables';
  dtOptions: DataTables.Settings = {};
  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
}
}

6. Now add below code into app.component.html file:

<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let group of data">
         <td>{{group.name}}</td>
         <td>{{group.email}}</td>
         <td>{{group.website}}</td>
     </tr>
  </tbody>
</table>

Don’t forget to run ng serve command to see final output.

Jassa Jatt

Thank you

September 23, 2019

How to Implement Owl Carousel Slider in Angular 8?

Hello to all, welcome to therichpost.com. Today In this post, I will tell you, How to Implement Owl Carousel Slider in Angular 8?

I am very happy during sharing this post. I faced some error but no one will face any error with my code.

Slider are the main part of lading page and today we will implement Owl carousel Slider in Angular 8.

Here is the working picture:

Here is the complete working and tested code, you need to follow:

1. Very first, here are common basics steps to add angular 8 application on your machine:

$ npm install -g @angular/cli

$ ng new angularowlslider // Set Angular8 Application on your pc

cd angularowlslider // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server

2. Now run below command into your terminal to include owl carousel package into your angular 8 application:

npm i ngx-owl-carousel-o

3. Now, add below code into your angular.json file:

....
"styles": [
    "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
    "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
    "src/styles.css"
  ],
....

4. Now add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { AppComponent } from './app.component';
import { Routes, RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CarouselModule,
    BrowserAnimationsModule,
     RouterModule.forRoot([]),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Now add below code into your app.component.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularowlslider';
  customOptions: any = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 700,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1
      },
      400: {
        items: 2
      },
      740: {
        items: 3
      },
      940: {
        items: 4
      }
    },
    nav: true
  }
}

6. Finally add, below code into your app.component.html file:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <div>Some tags before</div>
    <owl-carousel-o [options]="customOptions">
    <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>  
    <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>  
    <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template> 
    <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>  
    <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>  
  </owl-carousel-o>
  <div>Some tags after</div>
</div>

This is it and don’t forget run ng serve command again. Please follow the code and you will not face any kind of error.

If you have any query related to this post then please do comment below or ask question.

Thank you,

Jas

TheRichPost

September 21, 2019

Laravel 6 vuejs fullcalendar working example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Laravel 6 vuejs fullcalendar working example.

After some time, I will also share youtube working video on this tutorial.

How to implement Fullcalendar in Vue Laravel with dynamic Events — Laravel 6 vuejs fullcalendar working example

Laravel 6 has been released and this laravel 6 has many good features but today I am going to show you working full calendar in Laravel Vue combination and this coming experience was very interesting for me.

Laravel is the best php mvc framework and vuejs the best in making single page applications.

Here are the working code snippet and please use this very carefully:

1. Before using Laravel, make sure you have Composer installed on your machine.

2. Now run below command to download laravel installer:

composer global require laravel/installer

3. Here are the basics command to install fresh laravel 6 setup on your machine:

composer create-project --prefer-dist laravel/laravel fullcalendarvuelaravel

cd fullcalendarvuelaravel // go inside laravel 6 setup

4. Now here are the some npm commands you need to run into your terminal to install node module, fullcalendar and fullcalendar dependencies:

$ npm install


$ npm install --save vue-full-calendar


$ npm install --save babel-runtime


$ npm install babel-preset-stage-2 --save-dev


$ npm install moment --save

5. Now, you need to add below code into resources\js\app.js file:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
import 'fullcalendar/dist/fullcalendar.css';
window.Vue = require('vue');
import FullCalendar from 'vue-full-calendar'; //Import Full-calendar
Vue.use(FullCalendar);


/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)))

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app'
});

6. Now, you need to add below code into resources\js\components\ExampleComponent.vue file:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <full-calendar :events="events"></full-calendar>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
    data() {
    return {
    events: [
    {
    title : 'event1',
    start : '2018-12-13',
    }
    ]
    }
    },
    mounted() {
    console.log('Component mounted.')
    }
  }
</script>

7. Now, you need to add below code into resources\views\welcome.blade.php file:

<div id="app"><example-component></example-component></div>
<script src="{{asset('js/app.js')}}"></script>

8. Finally, you need to run below command into your terminal and you will see working full calendar example:

//In first terminal run
npm run watch

//In second terminal run
php artisan serve

And you will see working fullcalendar in laravel 6 vue and if you have any query regarding to this post then please do comment below.

Jassa Jatt

Thank you

September 20, 2019

Woocommerce hook add html to single product thumbnail

Hello to all, welcome to therichpost.com. In this post, I will tell you, Woocommerce hook add html to single product thumbnail.

With the help of this code, you will add custom html to product thumbnail image on single product page.

Here is the working code and please use this carefully into your theme’s functions.pgp file:

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'add_class_to_thumbs', 10, 2 );
function add_class_to_thumbs( $html, $attachment_id ) {
    global $product;
   global $woocommerce;
   $src  = wp_get_attachment_image_src( get_post_thumbnail_id( $product->ID ), 'full' );
   if ( get_post_thumbnail_id() !== intval( $attachment_id ) ) {
       $html  = '<div class="woocommerce-product-gallery__image--placeholder singleProductImg">';

       // I am wraping then product thumbnail into my custom div class-name 'productImg'

       $html .= sprintf( '<div class="productImg"><img src="'.$src[0].'" alt="%s" class="wp-post-image" /></div>', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
       $html .= '</div>';
   }

   return $html;
}

This is it. If you have any query related to this post then comment below.

Jassa

Thank you

September 18, 2019

Angular 8 Grouped Bar chart using data Laravel 6 REST API

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 Grouped Bar chart using data Laravel 6 REST API.

Today, I am going to show Chartjs Bar Chart in Angular 8 and data is coming from Laravel 6 Rest API.

This is Part 1 because in next part I will show multiple data working with arrays.

Here is the working code snipped please use this carefully:

1. Here are the basics commands, you need to use into your terminal or command prompt to install Angular 8 fresh set up:

$ npm install -g @angular/cli //Setup Angular8 atmosphere

$ ng new angular8chartjs //Install New Angular App

/**You need to update your Nodejs also for this verison**/

$ cd angular8chartjs //Go inside the Angular 8 Project

2. After Install Angular 8 fresh setup and go inside the Angular 8 setup, run below command into your terminal to install chartjs module:

npm install --save chart.js

3. After all above setup, here is code, you need to add into your app.component.ts file:

I have used Angular HTTPCLIENT to get data from third party or other site.

import { Component } from '@angular/core';
import * as Chart from 'chart.js';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular8chartjs';
  canvas: any;
  ctx: any;
  data = [];
  constructor(private http: HttpClient) {
    this.http.get('http://localhost/blog/public/api/sample-restful-apis').subscribe(data => {
    this.data.push(data);
    console.log(this.data);
    this.canvas = document.getElementById('myChart');
    this.ctx = this.canvas.getContext('2d');
    let myChart = new Chart(this.ctx, {
      type: 'bar',
      data: {
          labels: [this.data[0]['month']],
          datasets: [{
              label: '# of Votes',
              data: [this.data[0]['sale']],
              backgroundColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
        responsive: false,
        display:true
      }
    });
    }, error => console.error(error));
  }
}

4. Now, here is code, you need to add into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

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

5. Now, add below code into your app.component.html file:

<canvas id="myChart" width="700" height="400"></canvas>

6. Here is laravel API code in routes/api.php file , from where I am getting the data:

Route::get('sample-restful-apis', function()
{
    return response()->json(
        ['month' => 'january', 'sale' => '100']
    );
});

In the last, don’t forget to run ng serve command and don’t forget to turn on xampp server.

This is it and if you have any query related to this post then please do comment below.

Jassa Jatt

Thank you

September 16, 2019

Author: therichpost

Here is the working picture:

Here are the following steps to add Bootstrap to Angular 8 application:

1. First you need to run below command into your terminal to include bootstrap into your angular 8 app:

2. Now add below code into your src/styles.css:

3. Now finally add below html to see working bootstrap into your app.component.html file:

1. Let start, here are the basics commands to set Angular 8 into your pc:

2. After come inside angular8phpmyadmindatabse folder, please add below code into angular8phpmyadmindatabse\src\app\app.module.ts file:

3. Now add below code into angular8phpmyadmindatabse\src\app\app.component.ts file:

4. Now add below code into angular8phpmyadmindatabse\src\app\app.component.html file:

5. For good looks, add below code into app.component.css file:

6. Finally for mysql data, please add below code into employee.php file into your htdocs folder and don’t forget to start your XAMPP:

1. Before using Laravel, make sure you have Composer installed on your machine.

2. Now run below command to download laravel installer:

3. Here are the basics command to install fresh laravel 6 setup on your machine:

4. Now, you need to add below code into resources\js\app.js file:

5. Now, you need to add below code into resources\js\components\ExampleComponent.vue file:

6. Now, you need to add below code into resources\views\welcome.blade.php file:

7. Finally, you need to run below command into your terminal and you will see working full calendar example:

1. Let start, here are the basics commands to set Angular 8 into your pc:

2. After done with above commands, you need to run below command to get jquery into your angular 8 application:

3. Now, you need to add below jquery file path into your Angular 8 application angular.json file:

4. Now add below code into app.component.ts file:

5. Now add below code into app.component.html file:

6. Now add below code into app.component.css file:

1. Let start, here are the basics commands to set Angular 8 into your pc:

2. After Install Angular 8 fresh setup and go inside the Angular 8 setup, run below command into your terminal for creating new angular components:

3. After done with above commands and angular 8 setup and add below code into app.module.ts file:

4. Now add below code into app.component.html file:

5. Finally add below code into app.component.css file:

1. Here are the basics commands, you need to run for latest angular 8 setup and environment:

2. Here are the basics commands, you need to run into your terminal for datatable and its dependencies:

3. After done with commands add below code into you angular.json file:

4. Now add below code into your app.module.ts file:

5. Now add below code into app.component.ts file:

6. Now add below code into app.component.html file:

Here is the working picture:

Here is the complete working and tested code, you need to follow:

1. Very first, here are common basics steps to add angular 8 application on your machine:

2. Now run below command into your terminal to include owl carousel package into your angular 8 application:

3. Now, add below code into your angular.json file:

4. Now add below code into your app.module.ts file:

5. Now add below code into your app.component.ts file:

6. Finally add, below code into your app.component.html file:

1. Before using Laravel, make sure you have Composer installed on your machine.

2. Now run below command to download laravel installer:

3. Here are the basics command to install fresh laravel 6 setup on your machine:

4. Now here are the some npm commands you need to run into your terminal to install node module, fullcalendar and fullcalendar dependencies:

5. Now, you need to add below code into resources\js\app.js file:

6. Now, you need to add below code into resources\js\components\ExampleComponent.vue file:

7. Now, you need to add below code into resources\views\welcome.blade.php file:

8. Finally, you need to run below command into your terminal and you will see working full calendar example:

1. Here are the basics commands, you need to use into your terminal or command prompt to install Angular 8 fresh set up:

2. After Install Angular 8 fresh setup and go inside the Angular 8 setup, run below command into your terminal to install chartjs module:

3. After all above setup, here is code, you need to add into your app.component.ts file:

4. Now, here is code, you need to add into your app.module.ts file:

5. Now, add below code into your app.component.html file:

6. Here is laravel API code in routes/api.php file , from where I am getting the data: