Two component.ts files point towards same component.html file

I'm trying to split my functions inside my first.component.ts file to another second.component.ts file make it more readable.

I am pointing to the same component.html file from both ts files like this:

first.component.ts

@Component({
selector: 'first-component',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss'],
})


second.component.ts

@Component({
selector: 'second-component',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss'],
})


By doing this, I get errors that functions that are in the second component are missing in the first component and that other way around. This is because when I use the functions in the HTML they check for them in both of the .ts files.

What can I do to prevent this?

Continue reading...