daniele-zurico

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

daniele-zurico

<mat-cell *matCellDef="let element" [ngClass]="{'col-value': element.details === undefined}">
  <!-- expand caret -->
  <span *ngIf="i === 0 && element.details">
    <span *ngIf="expandedElement && expandedElement[cols] === element[cols]; else plusIcon" class="expand-icon">&#9650;</span>
    <ng-template #plusIcon><span class="expand-icon">&#9660;</span></ng-template>
  </span>
  <span>{{element[cols]}}</span>
</mat-cell>

daniele-zurico

<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
    [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
    style="overflow: hidden">
</mat-row>

daniele-zurico

<!-- Expanded Content Column - The detail row is made up of this one column -->
<ng-container matColumnDef="expandedDetail">
  <mat-cell *matCellDef="let detail">
    <ngx-data-table [data]="detail.element.details" class="detail-table"></ngx-data-table>
  </mat-cell>
</ng-container>

daniele-zurico

<div class="mat-elevation-z8">
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
  <ng-container [matColumnDef]="cols" *ngFor="let cols of displayedColumns; let i = index">
    <mat-header-cell *matHeaderCellDef mat-sort-header>{{cols}}</mat-header-cell>
    <mat-cell *matCellDef="let element" [ngClass]="{'col-value': element.details === undefined}">
      <!-- expand caret -->
      <span *ngIf="i === 0 && element.details">
        <span *ngIf="expandedElement && expandedElement[cols] === element[cols]; else plusIcon" class="expand-icon">&#9650;</span>
        <ng-template #plusIcon><span class="expand-icon">&#9660;</span></ng-template>
      </span>

daniele-zurico

.detail-table {display: flex;flex-direction: column;display: block;margin: 10px;width: 100%;}
.expand-icon {color: rgba(0,0,0,.44);font-size: 12px; margin-right: 5px; cursor: pointer;}
.col-value:first-child span{margin-left: 15px;}
.mat-form-field {padding: 10px 10px 0 10px;width: calc(100% - 20px);}

daniele-zurico

{
  "name": "kit",
  "version": "1.0.0",
  "description": "Starting point for the Apollo GraphQL Server tutorial.",
  "main": "src/server.ts",
  "dependencies": {
    "apollo-server": "^2.0.0-beta.2",
    "express": "^4.16.3",
    "graphql": "0.13.2",
    "graphql-tools": "^3.0.0-beta.0",

daniele-zurico

const MONGO_PORT = 27017;
const MONGO_URL = "localhost";
const dbName = "graphExample";

// help to debug mongoose
mongoose.set("debug", true);

mongoose.connect(`mongodb://${MONGO_URL}:${MONGO_PORT}/${dbName}`);

const app = express();

daniele-zurico

import helloSchema from "./hello.schema";
import userSchema from "./user.schema";

const schemas = [userSchema, helloSchema];

export default schemas;

daniele-zurico

import {
	addMockFunctionsToSchema,
	gql,
	makeExecutableSchema
} from "apollo-server";
import { GraphQLSchema } from "graphql";

const helloSchema: GraphQLSchema = makeExecutableSchema({
	typeDefs: gql`
		type Query {