CODEWITHSUNDEEP
javascriptangularcontrollercomponents
AJ_
AJ_

Reputation: 3987

Angular2 - Share component controllers

I have two page components that use the same methods with the exception of using two different type classes. The two components are called Services and Users. Both components use templates that are very similar with the exception of the class property info it displays. It seems to be inefficient to repeat methods on both controllers, is there a way to combine/share controllers.

Services.ts 

import { Component } from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common'; 
const template = require('./service.component.html');
const style = require('./service.component.css'); 

interface Service {
    id: number;
    name: string;
    summary: string;
    path: string; 
}; 

@Component({
  selector: 'admin-services',
  directives: [ CORE_DIRECTIVES],
  template: template,
  styles: [ style ]
})

export class ServiceComponent {
  services = Services; 
  selectedService:Service ; 
  constructor() {
  }

  onselect(service:Service){
    this.selectedService = service ; 
  }
  onEdit(service:Service){
    console.log("Edit: "+service); 
  }
  onDelete(service:Service){
      console.log("Delete: "+service);
  }
  onView(service:Service){
    console.log("View: "+service); 
  }
  onAdd(){
    this.selectedService = <Service>{}; 
  }
}

User.ts

import { Component } from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common'; 
const template = require('./users.component.html');
const style = require('./users.component.css'); 

interface User {
    id: number;
    image: string;
    name: string;
    email: string;
    role: string; 
}; 

@Component({
  selector: 'admin-users',
  directives: [ CORE_DIRECTIVES],
  template: template,
  styles: [ style ]
})

export class UsersComponent {
  users = Users; 
  selectedUser:User ; 
  constructor() {
  }

  onselect(user:User){
    this.selectedUser = user ; 
  }
  onEdit(user:User){
    console.log("Edit: "+user); 
  }
  onDelete(user:User){
      console.log("Delete: "+user);
  }
  onView(user:User){
    console.log("View: "+user); 
  }
  onAdd(){
    this.selectedUser = <User>{}; 
  }
}

Upvotes: 0

Views: 578

Answers (2)

drew moore
drew moore

Reputation: 32680

Yep, this is where Angular's component-driven design and Typescripts's class-driven design really shine:

Having defined a ServicesComponent as you have above, you can simply extend that class and attach different component metadata to it: 

@Component({
  selector: 'admin-users',
  directives: [ CORE_DIRECTIVES],
  template: template,
  styles: [ style ]
})
export class UsersComponent extends ServicesComponent { 
    constructor(){
      super();
    } 

    //override whatever methods/fields in the parent class you need to (and only those)


}

Upvotes: 2

John Baird
John Baird

Reputation: 2676

I believe you can create a service with a single set of methods and pass in an object. Then cast the object to the desired class and use it in the method.

Upvotes: 0

Related Questions