ng-helper

Angular 4,5,6 Implementations, Like Directive, Flags, Http, Router, LESS/SASS, Bootstrap 4, Slider, Tabs etc

View project on GitHub

ng-helper

Sharing fixes for issue which we’re getting while development angular app

VIEW ALSO:

Properties Action
ng6 Specific View Details
PROPERTIES View Details
Install Angular Go
Upgrade Angular CLI to the latest version Go
BOOTSTRAP Installation Go
Install jQuery and Tether Go
NgBootstrap Go
INSTALL FA (Font Awesome) Go
INSTALL FlexLayout Go
CREATE NEW COMPONENT Go
CHANGE TITLE Go
META TAG Go
Http Service Go
IF ELSE Go
Angular 4 Local To Live Server in Subfolder Go
Routing Go
Fixes - Refeshing browser issues on Server Go

Install Angular

ng new project_name

Install Angular with LESS

ng new project_name --style less

Install Angular with SASS

ng new project_name --style scss

Upgrade Angular CLI to the latest version

npm install -g @angular/cli@latest

In the project folder

npm install --save-dev @angular/cli@latest

after inside angular-cli.json (inside project root folder) find styles and add a bootstrap css like this:

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

BOOTSTRAP 4

npm install --save bootstrap

Update For Bootstrap 4 (currently in beta):

npm install bootstrap@next --save

Install jQuery and Tether

npm install --save tether

npm install --save jquery

BOOTSTRAP 4 with font awesome

npm install --save bootstrap font-awesome

Install Angular FlexLayout

npm install @angular/flex-layout --save

### Import the Angular Flex-Layout NgModule src/app/app.module.ts

 import {NgModule} from '@angular/core';
import {FlexLayoutModule} from '@angular/flex-layout';
// other imports 
@NgModule({
  imports: [FlexLayoutModule],
  ...
})
export class PizzaPartyAppModule {}

Ref

NgBootstrap (For Carousal, Tabs kind of things)

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

Once installed you need to import our main module.

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

Adding full Bootstrap component JS support

version 4 Note: from Bootstrap site

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported. https://v4-alpha.getbootstrap.com/getting-started/javascript/

In .angular-cli.json add the following lines to the scripts section:

version 4.x

  "scripts": [
  	"../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
  ]

Bootstra p 4 Nav support add below lines in angular-cli.json

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

INSTALL FA (Font Awesome) Complete

npm install --save font-awesome angular-font-awesome Import the module:

import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
@NgModule({
  //...
  imports: [
    //...
    AngularFontAwesomeModule
  ],
  //...
})
export class AppModule { }

Font Awesome CSS ONLY

npm install --save font-awesome ```javascript // in angular.json "build": {   "options": {
"styles": [
  "node_modules/font-awesome/css/font-awesome.css"
  "styles.css"
],   } } ``` **Using SASS** Add the following to _variables.scss: ```javascript $fa-font-path : '../node_modules/font-awesome/fonts'; ```

In styles.scss add the following:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

HOW TO CREATE NEW COMPONENT

ng generate component componentName

using short form

ng g c componentName

This will generate new components with all the related files (.ts, .html, .css) and it will pass and import in app.module.ts

HOW TO CHANGE TITLE WITH COMPONENTS or MENU

app.module.ts

import { BrowserModule, Title } from '@angular/platform-browser';

Add Title in Provider

providers: [Title]

Go to your component like nav.component.ts import { Title } from ‘@angular/platform-browser’;

 public constructor(private titleService: Title ) { }
     public setTitle( newTitle: string) {
       this.titleService.setTitle( newTitle );
     }

 <ul>
    <li><a (click)="setTitle( 'Home' )">Home</a>.</li>
    <li><a (click)="setTitle( 'About Us' )">About Us</a>.</li>
    <li><a (click)="setTitle( 'Contact Us' )">Contact Us</a>.</li>
  </ul>

Add META TAG

Go to your component like about.component.ts

import { Meta } from '@angular/platform-browser';

public constructor(meta: Meta) {
    // Sets the <meta> tag for the page
    meta.addTags([
      { name: 'keyword', content: 'About Us, hello travel india, about hello travel india' },
      { name: 'description', content: 'Hello Travel India, offers a wide range of destinations from the mainstream to the exotic ones.' },
    ]);

  }

How to Implement Http Service in angular 4 - GET method - Using Local JSON File

Import Http Module in app.module.ts

import { HttpModule } from '@angular/http';

Pass HttpModule in Imports

imports: [
    HttpModule
]

Write all below code in your services.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class PackageService {
 
  packagesUrl:string =  "assets/data/packages.json";
  constructor(private http: Http) { }
  
  getPackages() {
    return this.http.get(this.packagesUrl)
      .map(response => response.json());
  }

}

Go to the component where you want to access json file, In my case I’ve packages.component.ts

import your service here

import { PackageService } from '../data/packages.service';

add PackageService to provider

@Component({
    selector: "packages-section",
    templateUrl: "../view/packages.component.html",
    providers:[PackageService]
})

constructor(packageService: PackageService){
	packageService.getPackages().subscribe(
		people => {
		  this.totalPackages = people;
		  console.log("Packages is "+this.totalPackages.packageLocation)
		},
		error => console.error("Error : " + error),
		() => console.info('Packages Completed')
	  );
}

LOCAL JSON Implementation

_Regarding JSON file, you have to keep _myData.json file in assets/data folder

Go to angular-cli.json and add data in assets something like below

"assets": [
        "assets",
        "favicon.ico",
        "data" // this is your json path
      ],

Congrats!!! Now You will have to access JSON file :)

IF ELSE

TS

  serverCreationStatus = "No server created";
  serverName = "";
  serverCreated = false;

Template

<p *ngIf="serverCreated; else noServer"></p>
 <ng-template #noServer>
      <p>No server was created.</p>
 </ng-template>

Upload Angular 4 Local To Live Server in Subfolder - FIXES

Two option to fix, I will suggest the first one. because this will make your app smart and you don’t need to change anything in dist/index.html

1. Make Builded folder smart to get directory automatically

Use below line insted of <base href="/"> in src/index.html file.

eg.:

<script> document.write('<base href="' + document.location + '" />');</script>

This will get directory automatically and set that to base href.

2. Update index.html file at every build

When you’re deploying to non-root path within a domain, you’ll need to manually update the <base href="/"> tag in your dist/index.html.

In this case, you will need to update to <base href="/subfolder-name/"> Thanks To filipesilva

Expected path: www.domain.com/subfolder/

Implement ROUTING

run below command

ng generate module app-routing –flat –module=app

--flat puts the file in src/app instead of its own folder. --module=app tells the CLI to register it in the imports array of the AppModule.

Check below lines in app.module.ts file

``` import { AppRoutingModule } from ‘.//app-routing.module’; imports: [ AppRoutingModule

]


Also Check below lines in ```app.routing.module.ts``` file

```import { RouterModule, Routes } from '@angular/router';
import { CheckoutComponent } from './checkout/checkout.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

(FIXES) - Refeshing browser issues (404) on Server

Import LocationStrategy and HashLocationStrategy module into app.module.ts

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

Put this {provide: LocationStrategy, useClass: HashLocationStrategy} into Provider

eg:

providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
   ]

FEEL FREE To ADD MORE :)