Create module

HOME > DOCUMENTATION > CREATE MODULE

Create a new type of Input (sound, text, etc.)

1. Create the new interface in the API

1. Go in src/api/core/demo/input
2. Create a folder called : type-input where type is the type of the input (ex: image-input, sound-input, ...)
3. Create 2 typescript files inside : type-input.component.ts and type-input.presenter.ts
4. Write this code in the type-input.component.ts file:

import {InputComponent} from '../input.component';
import { TypeInputPresenter } from './type-input.presenter';

export interface TypeInputComponent extends InputComponent{
	getPresenter():TypeInputPresenter;
        //some methods to implements
}

Replace Type by the name given before.

5. Write this code in the type-input.presenter.ts file :

import {InputPresenter} from '../input.presenter';

export interface TypeInputPresenter extends InputPresenter{
  //some methods to implements
}

Replace Type by the name given before.

6. In the folder src/api/core/demo/input create a file type-input.d.ts
7. Write this code inside (export new interfaces created just before) :

export * from './type-input/type-input.presenter'
export * from './type-input/type-input.component'

Interfaces are created

2. Create a new angular component

1. Open cmd
2. Go in src/app/demo/input
3. Generate a new component with the command : ng generate component type-input where type is the name as in the API
4. A folder called type-input is created, create a new file inside : type-input.presenter.ts
5. In the file type-input.component.ts :

• rename the class (add the suffix Impl )
• implement the interface of the component
• implement the method of the API ( getPresenter() )
• import interfaces from the API (created brefore TypeInputComponent and TypeInputPresenter)
• import the implementation of the presenter (created just after this part)

import { Component, OnInit } from '@angular/core';
import { TypeInputComponent } from '@api/core/demo/input/type-input';
import { TypeInputPresenter } from '@api/core/demo/input/type-input/type-input.presenter'
import { TypeInputPresenterImpl } from './type-input.presenter';

@Component({
  selector: 'app-type-input',
  templateUrl: './type-input.component.html',
  styleUrls: ['./type-input.component.css']
})
export class TypeInputComponentImpl implements OnInit, TypeInputComponent {

  private presenter:TypeInputPresenter;

  constructor() { 
  }

  ngOnInit() {
  }

  getPresenter():TypeInputPresenter {
    return this.presenter;
  }

}

Replace Type by the name given brefore. Don't forget the type in imports and in selector, template and style

6. In the file type-input.presenter.ts paste this code and rename Type by the name givn before :

import {TypeInputPresenter} from '@api/core/demo/input/type-input';;

export class TypeInputPresenterImpl implements TypeInputPresenter {

}

3. Add the new Component in the list of available components

1. In the file src/app/demo/input/input-container.component :

• import the new component :

import {TypeInputComponentImpl} from './type-input/type-input.component';

• add it to the map to make it available :

private mapSons = new Map()
    .set("image", ImageInputComponentImpl)
    .set("json", JsonInputComponentImpl)
    .set("type", TypeInputComponentImpl);

4. Add the new Component in the list of entries components

1. In the file src/app/app.module.ts :

• add the new component in the list entryComponents:

entryComponents: [JsonInputComponentImpl, ImageInputComponentImpl, JSONModelComponentImpl, TSModelComponentImpl, TypeInputComponentImpl],

Now you can implement your component

Create a new type of Model

1. Create the new interface in the API

1. Go in src/api/core/model
2. Create a folder called : type-model where type is the type of the model(ex: text-model, form-model, ...)
3. Create 2 typescript files inside : type-model.component.ts and type-model.presenter.ts
4. Write this code in the type-model.component.ts file:

import {ModelComponent} from '../model.component';
import { TypeModelPresenter } from './type-model.presenter';

export interface TypeModelComponent extends ModelComponent{
	getPresenter():TypeModelPresenter;
        //some methods to implements
}

Replace Type by the name given before.

5. Write this code in the type-model.presenter.ts file :

import {ModelPresenter} from '../model.presenter';

export interface TypeModelPresenter extends ModelPresenter{
  //some methods to implements
}

Replace Type by the name given before.

6. In the folder src/api/core/model create a file type-model.d.ts
7. Write this code inside (export new interfaces created just before) :

export * from './type-model/type-model.presenter'
export * from './type-model/type-model.component'

Interfaces are created

2. Create a new angular component

1. Open cmd
2. Go in src/app/demo/model
3. Generate a new component with the command : ng generate component type-model where type is the name as in the API
4. A folder called type-model is created, create a new file inside : type-model.presenter.ts
5. In the file type-model.component.ts :

• rename the class (add the suffix Impl )
• implement the interface of the component
• implement the method of the API ( getPresenter() )
• import interfaces from the API (created brefore TypeModelComponent and TypeModelPresenter)
• import the implementation of the presenter (created just after this part)

import { Component, OnInit } from '@angular/core';
import { TypeModelComponent } from '@api/core/model/type-model';
import { TypeModelPresenter } from '@api/core/model/type-model/type-model.presenter'
import { TypeModelPresenterImpl } from './type-model.presenter';

@Component({
  selector: 'app-type-model',
  templateUrl: './type-model.component.html',
  styleUrls: ['./type-model.component.css']
})
export class TypeModelComponentImpl implements OnInit, TypeModelComponent {

  private presenter:TypeModelPresenter;

  constructor() { 
  }

  ngOnInit() {
  }

  getPresenter():TypeModelPresenter {
    return this.presenter;
  }

}

Replace Type by the name given brefore. Don't forget the type in imports and in selector, template and style

6. In the file type-model.presenter.ts paste this code and rename Type by the name given before :

import {TypeModelPresenter} from '@api/core/model/type-model';

export class TypeModelPresenterImpl implements TypeModelPresenter {

}

3. Add the new Component in the list of available components

1. In the file src/app/demo/model/model-container.component :

• import the new component :

import {TypeModelComponentImpl} from './type-model/type-model.component';

• add it to the map to make it available :

private mapSons = new Map()
    .set("json", JSONModelComponentImpl)
    .set("typescript", TSModelComponentImpl)
    .set("type", TypeModelComponentImpl);

4. Add the new Component in the list of entries components

1. In the file src/app/app.module.ts :

• add the new component in the list entryComponents:

entryComponents: [JsonInputComponentImpl, ImageInputComponentImpl, JSONModelComponentImpl, TSModelComponentImpl, TypeModelComponentImpl],

Now you can implement your component