mdmoin7

import { FormControl } from '@angular/forms';

export function zipCodeValidator(ctrl: FormControl) {
    if (ctrl.value === 123456) {
        return null;
    }

    return {
        zipCode: { validCode: 123456 }
    };

mdmoin7

class App extends Component {
  render() {
    return (
      <div>
        <Counter />
      </div>
    );
  }
}

mdmoin7

.....

import { Provider } from 'react-redux';
import appStore from './store';

.....

const AppWithStore=()=>(
  <Provider store={appStore}>
    <App />

mdmoin7

import { createStore } from 'redux'
import { currencyReducer } from './reducers/currencyReducer.js';

const appStore=createStore(currencyReducer);

export default appStore;

mdmoin7

import {INCREMENT,DECREMENT} from '../actions/counterActions.js';

const currencyReducer=(state=0,action)=>{
  switch(action.type){
    case INCREMENT: 
    return state+1;
    case DECREMENT:
    return state-1;
    default:
    return state;

mdmoin7

const INCREMENT='INCREMENT';
const DECREMENT='DECREMENT';

const incrementCount=()=>({
  type: INCREMENT
});

const decrementCount=()=>{
  return {
    type:DECREMENT

mdmoin7

<!-- using a different loader -->
<app-image-with-loading 
  image="https://picsum.photos/400?image=179"
  loader="https://media.tenor.com/images/8d483e909ec3618f521e9700d6fbf2e1/tenor.gif">
</app-image-with-loading>

<!-- uses default loader -->
<app-image-with-loading 
  image="https://picsum.photos/400?image=179">
</app-image-with-loading>

mdmoin7

<div [ngStyle]="{height:height+'px',width:width+'px'}" *ngIf="isLoading">
  <img [src]=loader />
</div>
<img [src]=image [ngStyle]="{visibility:isLoading?'hidden':'',height:height+'px',width:width+'px'}"
(load)="hideLoader()" (error)="hideLoader()"/>

mdmoin7

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

@Component({
  selector: 'app-image-with-loading',
  templateUrl: './image-with-loading.component.html',
  styleUrls: ['./image-with-loading.component.css']
})
export class ImageWithLoadingComponent {

  @Input() loader:string='https://media.tenor.com/images/f864cbf3ea7916572605edd3b3fe637f/tenor.gif';

mdmoin7

 <app-product (addItem)="addDataToCart($event.product)" [pData]="product" ></app-product>