load dynamic script in angular 6

import { Component, ViewEncapsulation, OnInit, ElementRef, NgModule, NgZone, ViewChild, AfterViewInit } from '@angular/core';
         
declare var google: any; 

  ngAfterViewInit(): void {

    let googleApiKey = 'AIzaSyB4a';

    let googleMapsUrl = 'https://maps.googleapis.com/maps/api/js?key=' + googleApiKey + '&libraries=places'; // replace by your API key

    this.addMapsScript(googleMapsUrl);

  }

  addMapsScript(googleMapsUrl: string) {
    if (!document.querySelectorAll(`[src="${googleMapsUrl}"]`).length) {
      document.body.appendChild(Object.assign(
        document.createElement('script'), {
          type: 'text/javascript',
          src: googleMapsUrl,
          onload: () => this.createGoogleSearchBox()
        }));
    } else {
      this.createGoogleSearchBox();
    }
  }

createGoogleSearchBox() {
    let updateSitesLocationEl = document.getElementById('txtUpdateSitesLocation');
    let updateSitesLocation = new google.maps.places.SearchBox(updateSitesLocationEl);
    updateSitesLocation.addListener('places_changed', function() {
      let searchBoxValue = self.getValueFromGoogleSearchBox(updateSitesLocation);
      self.updateSitesLocationData['location'] = searchBoxValue.location;
    });
  }

First import AfterViewInit from angular core

create google variable 

in ngAfterViewInit   set google api key and google library url

call a addMapsScript  function in ngAfterViewInit 


After a script onload event call you other google map function s




Load google map script in angular 6

dynamic load google script in angular 6 ,7

Router in Angular 6,7,8

interface Route {

  path?: string

  pathMatch?: string

  matcher?: UrlMatcher

  component?: Type<any>

  redirectTo?: string

  outlet?: string

  canActivate?: any[]

  canActivateChild?: any[]

  canDeactivate?: any[]

  canLoad?: any[]

  data?: Data

  resolve?: ResolveData

  children?: Routes

  loadChildren?: LoadChildren

  runGuardsAndResolvers?: RunGuardsAndResolvers

}

1.      path - It uses the route matcher DSL

2.      pathMatch - It uses to specifies the matching strategy

3.      matcher - It uses to defines a custom strategy for path matching

4.      component - It is a component type

5.      redirectTo - It is the URL fragment and it will replace the current matched segment

6.      outlet - It is the name of the outlet the component should be placed into

7.      canActivate  - It is an array of DI tokens  and used to handle the CanActivate handlers

8.      canActivateChild - It is an array of DI tokens and used to handle the CanActivateChild handlers

9.      canDeactivate - It is an array of DI tokens and used to handle the CanDeactivate handlers

10.  canLoad - It is an array of DI tokens and used to handle the CanLoad handlers

11.  data - It is additional data provided to the component by using the ActivatedRoute

12.  resolve - It is a map of DI tokens used to look up data resolvers

13.  runGuardsAndResolvers - It is defined when guards and resolvers will be run and by default, they run only when the matrix parameters of the route change.

14.  children - it is an array of child route definitions

15.  loadChildren - It is a reference to lazily loaded child routes.

Angular router has own library package - @angular/router.

import {Routes, RouterModule,}  from '@angular/router';

The basic concept of Angular Router and It allows you to -

1.      Redirect a URL to another URL

2.      Resolve data before a page is displayed

3.      Run scripts when a page is activated or deactivated

4.      Lazy load parts of our application

The router supports both styles with two LocationStrategy providers -

1.      PathLocationStrategy— this is the default style.

2.      HashLocationStrategy— adds the route path to the hash (#) in the browser’s URL.

built a Data Portal and Ecommerce business from scratch task list

After a quick brainstorming session, we settled on the following action items:

• Determine what to sell 
• research on local target market and google trend 
• research on online portal business model
• Select an appropriate business model
• Source a supplier
• Order samples
• Determine pricing
• Create the brand
• Find a Domain Name
• Create a logo
• if Data portal collect a data source 
• if Data portal  discussion and decide what filed (or property is important)
• if Data portal  discussion and decide what filed get from witch source 
• if Data portal set a field ( product property ) filter set 
• Set up the online store
• Set SEO keyword 
• Submit website in SEO bot
• Take product photos
• Create blog content
• Set up social accounts
• find a best cloud hosting provider 
• Launch
• integrate customer fatback forms or help chat box like plugin 
• Test multiple marketing channels
• Drive targeted traffic
• Make sales

Data Portal business from scratch task list

E commerce business from scratch task list

Create select dynamic in Angular 6

         

<select [(ngModel)]="perPage" (change)="onGridPageLenthChange($event.target.value)" class="form-control form-control-sm">
                   <option *ngFor="let lenghtChangeItem of lengthChangeMenu" value={{lenghtChangeItem.valueField}} >
                       {{lenghtChangeItem.displayField}}
                   </option>
                </select>

        in compoent

  perPage:any;
  lengthChangeMenu:any[];


     [(ngModel)]="perPage"    For  default selected


'lengthChangeMenu':[
    {
      displayField:5,
      valueField:5
    },
    {
      displayField:10,
      valueField:10
    },
    {
      displayField:25,
      valueField:25,
      selected:true
    },
    {
      displayField:50,
      valueField:50,
      selected:true
    },
    {
      displayField:100,
      valueField:100,
      selected:true
    }
  ],
   



Create dropdown  dynamic in Angular 2
Create select in ngfor  in Angular 4
set default value in  Angular 6

Explain Angular 2+ ngModule

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

• A module is a class decorated with @NgModule. It serves as a registry (aka container) for all the components, pipes, directives and providers in your application.
• An import is what you put in the imports property of the @NgModule decorator. It enables an Angular module to use functionality that was defined in another Angular module.
• An export what you put is the exports property of the @NgModule decorator. It enables an Angular module to expose some of its components/directives/pipes to the other modules in the applications. Without it, the components/directives/pipes defined in a module could only be used in that module.

• Providers

  This will include the services created.

  Bootstrap

  This includes the main app component for starting the execution.

@Attribute decorator in Angular Js

import {

    Component,

    Attribute

} from '@angular/core';

export type ButtonType = 'primary' | 'secondary';

@Component({

    selector: 'app-button',

    template: `

    <button [ngClass]="type">

      <ng-content></ng-content>

    </button>

  `

})

export class ButtonComponent {

    constructor(@Attribute('type') public type: ButtonType = 'primary') {}

}

  @Attribute decorator in Angular 2 

 Angular will evaluate it once and forget about it. As a general rule, I prefer the @Attribute() approach when the string is a fixed value that never changes.

Use Example 

<app-button type="secondary" (click)="click()">Click</app-button>

Use of symbols in custom directives and Components Scope Binding in angular 1

< is for one-way binding.

@ binding is for passing strings. These strings support {{}} expressions for interpolated values.

= binding is for two-way model binding. The model in parent scope is linked to the model in the directive's isolated scope.

& binding is for passing a method into your directive's scope so that it can be called within your directive.

When we are setting scope: true in directive, Angular js will create a new scope for that directive. That means any changes made to the directive scope will not reflect back in parent controller.

<: one-way binding

=: two-way binding

&: function binding

@: pass only strings