manivelarjunan

import React, {Component} from 'react';

const asyncComponent = (importComponent) => {
    return class extends Component {
        state = {
            component : null
        };

        componentDidMount() {

manivelarjunan

import React, { Component} from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';

import Welcome from './containers/Welcome';
import Home from './containers/Home';
import asyncComponent from './containers/hoc/asyncComponent';
//import Details from './containers/Details';

const AsyncComponent = asyncComponent(() => {
     // Pass the component which you want to load dynamically. 

manivelarjunan

import React, { Component, Suspense } from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';
import Welcome from './containers/Welcome';
import Home from './containers/Home';
//import Details from './containers/Details';

const Details = React.lazy(() => import('./containers/Details'));

class App extends Component {

manivelarjunan

import React, { Component, Suspense } from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';

import Welcome from './containers/Welcome';
import Home from './containers/Home';
//import Details from './containers/Details';
// Above import loads on load and adds dependencies globally. so it should be commented/removed for lazy loading component.
const Details = React.lazy(() => import('./containers/Details'));
// Lazy loading import doesn't allow Named component.
class App extends Component {

manivelarjunan

import React, { Component } from 'react';
import Person from './Person/Person';
import './App.css';

class App extends Component {
  state = {
    persons: [
      {name:'mani',age:45},
      {name:'papi',age:34}
    ]

manivelarjunan

import React, { useState } from 'react';
import Person from './Person/Person';
import './App.css';

//class App extends Component {
  const app = props => {
  const [personsState,setPersonState] =  useState({
    persons: [
      {name:'mani',age:45},
      {name:'papi',age:34}

manivelarjunan

export interface GoogleData {
  id: number;
  country: string;
  zipCode: string;
}

manivelarjunan

import { ReversePipe } from './reverse-value.pipe';

// Isolated test case.
describe('ReversePipe', () => {
  it('create an instance', () => {
    const pipe = new ReversePipe();
    expect(pipe).toBeTruthy();
    expect(pipe.transform('olleh')).toBe('hello');
  });
});

manivelarjunan

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reversePipe'
})
export class ReversePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return value
      .split('')
      .reverse()

manivelarjunan

import { Observable, Observer } from 'rxjs';

export class UserAsyncService {
  user = { name: 'Mannie' };
  getUserDetails() {
    // Create an observables.
    const userObservables = Observable.create(
      (observer: Observer<{ name: string }>) => {
        setTimeout(() => {
          observer.next(this.user);