Recently in my Angular2 project, I created two components (users.component and tasks.component) that need to pass data to a service for processing before sending it to the parent component.
Code snippet from users.component.ts:
Import { Component } from '@angular/core';
@Component({
selector: 'users',
templateUrl: 'app/users.component.html',
styleUrls: ['app/users.component.css']
})
export class UsersComponent {
// Code implementation for users component...
}
Code snippet from users.component.html:
<div class="addUser" id="addUser">
<!-- HTML code for adding user goes here -->
</div>
Code snippet from tasks.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'tasks',
templateUrl: 'app/tasks.component.html',
styleUrls: ['app/tasks.component.css']
})
export class TasksComponent {
// Code implementation for tasks component...
}
Code snippet from tasks.component.html:
<div class="addTask" id="addTask">
<!-- HTML code for adding task goes here -->
</div>
Compare.service.ts:
import { Injectable } from '@angular/core';
@Injectable()
export class CompareService {
// Service functionality code will go here...
}
I am aiming to achieve a structure similar to this: enter image description here
From users.component, I intend to extract designUsers, FrontendUsers, and BackendUsers. Similarly, from tasks, I want to retrieve designTasks and other arrays. My question is about the feasibility of implementing such a structure, or if not possible, any alternate ideas would be greatly appreciated. Thank you!