All new Angular components get 4 default files, one of them is this file

name.component.ts

It's really easy to just put all our logic right in this file, but does this violate the Separation of Concerns Principle?

It depends on who we talk to about this. If we are strict, the answer is that the name.component.ts file should have minimal logic, all of it pertaining to the view only.

All other logic which processes onClick, onGet, onSubmit, onSave, onDelete etc. should be farmed off into a new ts module such as "someCommonFile.ts"

Like this:

// save is an exported function we import
import {save} from './someCommonFile'

onSave(){
  // just call the function in someCommonFile
  save(parameters);
}

When we first start creating new components, we would have put all the save logic into the .component file, but by moving that function elsewhere we are separating concerns which is good, and in this case better.

Remember that exported functions can be used anywhere.

Our new mantra could become "Keep those Views Clean!"

JWP 2020