daniele-zurico

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { MatPaginator, MatSort } from '@angular/material';
import { NgxDataTableDataSource } from './ngx-data-table-datasource';

@Component({
  selector: 'ngx-data-table',
  templateUrl: './ngx-data-table.component.html',
  styleUrls: ['./ngx-data-table.component.css']
})
export class NgxDataTableComponent {

daniele-zurico

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator, MatSort } from '@angular/material';
import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';


/**
 * Data source for the NgxDataTable view. This class should
 * encapsulate all logic for fetching and manipulating the displayed data
 * (including sorting, pagination, and filtering).

daniele-zurico

{
  ...
      "architect": {
        "build": {
          ...
          "configurations": {
            "production-fr": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",

daniele-zurico

import React, { createContext, useState, useContext } from "react";

const context = createContext({
  activeTabId: "a",
  changeTab: (id: string) => {}
});

const Tab = ({ id, children }: any) => {
  const tab = useContext(context);
  return <div onClick={() => tab.changeTab(id)}>{children}</div>;

daniele-zurico

import React, { useState, useReducer, useRef } from "react";

const todoListReducer = (
  state: string[],
  action: { type: string; value: string }
) => {
  switch (action.type) {
    case "ADD":
      return [...state, action.value];
    case "REMOVE":

daniele-zurico

import React, { createContext, useState, useContext } from "react";

const context = createContext({
  activeTabId: "a",
  changeTab: (id: string) => {}
});

const Tab = ({ id, children }: any) => {
  const tab = useContext(context);
  return <div onClick={() => tab.changeTab(id)}>{children}</div>;

daniele-zurico

const Tab = ({ id, children }: any) => {
  const tab = useContext(context);
  return <div onClick={() => tab.changeTab(id)}>{children}</div>;
};

const TabPanel = ({ whenActive, children }: any) => {
  const tab = useContext(context);
  return tab.activeTabId === whenActive ? children : null;
};

daniele-zurico

const TabSwitcher = ({ children }: any) => {
  const [activeTabId, setActiveTab] = useState<string>("a");
  const changeTab = (newTabId: any) => {
    setActiveTab(newTabId);
  };

  return (
    <context.Provider
      value={{
        activeTabId: activeTabId,

daniele-zurico

<TabSwitcher>
  <Tab id="a">
    <button>a</button>
  </Tab>
  <Tab id="b">
    <button>b</button>
  </Tab>
  <TabPanel whenActive="a">
    <div>a panel</div>
  </TabPanel>

daniele-zurico

import React, { useState, useReducer } from "react";

const todoListReducer = (
  state: string[],
  action: { type: string; value: string }
) => {
  switch (action.type) {
    case "ADD":
      return [...state, action.value];
    case "REMOVE":