@Input or service not working in Component

Question

I am trying to make import a service inside a component but when I call the Input coming from this service, in my template, it does not render anything.

Here is my entity:

export interface PageState {
  step: string;
}

export class SimplePageState implements PageState {
  step: string;
}

Here is my service:

import { Injectable } from '@angular/core';
import { PageState } from './state.entity';

@Injectable()
export class PageStateService {
  getPageState(): Promise<PageState[]> {
    const step = [{ 'step': '1' }];

    return Promise.resolve(step);
    // return this.http.get('/api/status');
  }
}

I am importing and instantiating these in my main component:

import { Component, OnInit } from '@angular/core';
import { Module } from '../modules/core/module.entity';
import { ModuleService } from '../modules/core/module.service';
import { PageState } from './state.entity';
import { PageStateService } from './state.service';

@Component({
  selector: 'df-esign',
  templateUrl: './esign-page.html',
  styleUrls: ['./esign-page.scss'],
  providers: [ ModuleService, PageStateService ]
})
export class EsignComponent implements OnInit {
  modules: Module[];
  pageState: PageState[];

  constructor(private moduleService: ModuleService, private pageStateService: PageStateService) { }

  getModules() {
    this.moduleService.getModules().then(modules => this.modules = modules);
  }

  getPageState() {
    this.pageStateService.getPageState().then(pageState => this.pageState = pageState);
  }

  ngOnInit() {
    this.getModules();
    this.getPageState();
  }
}

And finally, I am using SimplePageState inside of a particular component, this way:

import { Component, Input } from '@angular/core';
import { SimpleModule } from '../core/module.entity';
import { SimplePageState } from '../../core/state.entity';

@Component({
  selector: 'df-module-page',
  templateUrl: './module-page.html',
  styleUrls: ['./module-page.scss'],
})

export class ModulePageComponent  {
  @Input() module: SimpleModule;
  @Input() pageState: SimplePageState;
}

But trying to do {{pageState}} in my template gives me a blank result with no error.. Anybody can help? I've spent hours looking on the internet and trying to make it work.

Edit: I am trying to use it inside a bread-crumbs component. Here is the beginning of my module-view.html, which contains df-module-page as well as df-module-bread-crumbs:

<ng-container [ngSwitch]="module.type">
  <template [ngSwitchCase]="'PageModule'"><df-module-page [module]="module" [pageState]="pageState"></df-module-page></template>
  <template [ngSwitchCase]="'TextModule'"><df-module-text [module]="module"></df-module-text></template>
  <template [ngSwitchCase]="'BreadCrumbModule'"><df-module-bread-crumb [module]="module" [pageState]="pageState" class="{{module.class}}"></df-module-bread-crumb></template>

I am calling SimplePageState in the bread-crumb-component too:

import { Component, Input, HostBinding } from '@angular/core';
import { SimpleModule } from '../core/module.entity';
import { SimplePageState } from '../../core/state.entity';

@Component({
  selector: 'df-module-bread-crumb',
  templateUrl: './module-bread-crumbs.html',
  styleUrls: ['./module-bread-crumbs.scss']
})

export class ModuleBreadCrumbsComponent {
  @Input() module: SimpleModule;
  @Input() pageState: SimplePageState;
}

And I am trying to do an ngIf inside of module-breads-crumbs.html with a pageState condition which does not have any effect:

<div class="dfbreadcrumbs">
  <ol *ngIf="module">
    <li *ngFor="let crumb of module.slots.crumbs; let i = index" class="step_{{i + 1}}">{{crumb.text}}</li>
  </ol>
</div>
<div *ngIf="pageState">ohohoh</div>

Answer 1

To pass data to an input you would need something like

<df-module-page [pageState]="pageState">

in the template of EsignComponent