I'm new to Angular and part of my problem is that I don't know what exactly this falls under, so I don't know where to research.
I'm building a save button component. This exists 10+ times throughout our app and has the same look and location in each view. The save function, however, will be a little different and might require some unique form validation based on where you're clicking it from.
The save button component is super lean at the moment and uses Angular Material.
import * as save from './buttonSave';
import './buttonSave.component.less';
@save.Component({
selector: 'ui-buttonSave',
template:
`
<button md-fab color="accent">
<md-icon class="md-24">save</md-icon>
</button>
`,
directives: [save.MdButton, save.MdIcon],
viewProviders: [save.MdIconRegistry]
})
export class ButtonSaveComponent {
}
What I would like to do is include a default click behavior that routes to some local save function located in the parent component that uses this save component in the template. To use this save button component, all I'd need to do (in theory) is stick it in the template, import/list the directives (maybe list a provider?), and then overwrite the save function for that component (maybe it could be called saveClick or something).
I don't really know what this would use in Angular to achieve this... EventEmitter? Output? Provider?
I know I could sidestep this by just doing this whenever I use this save component...
<ui-buttonSave (click)="localSave($event)"></ui-buttonSave>
But I would rather use all of the bells and whistles that Angular gives me. Any direction/help is greatly appreciated!