Use one instance of a Service per Component

Question

Using Angular 8 I have two components:

@Component({ selector: 'a' })
export class A_Component {
    constructor(dataService: DataService) { }
}

@Component({ selector: 'b' })
export class B_Component {
    constructor(dataService: DataService) { }
}

And the DataService is as follows:

export class DataService {
    public getValue(): Observable<number> { }
    public setValue(value: number) { }
}

Components A and B use DataService to communicate which their child (grandchild, ...) components.

But I want each Component, A and B, to have their own instance of DataService.

How to do this?

Answer 1

Use in this way

@Component({ selector: 'a',
    providers: [DataService]
})
export class A_Component {
    constructor(dataService: DataService) { }
}

@Component({ selector: 'b',
    providers: [DataService]
})
export class B_Component {
    constructor(dataService: DataService) { }
}