What is the goal?
  1. Use of Angular Components with multiple templates.
  2. Usage of TypeScript for productivity.
  3. Calling the components in different ways.
I won't write all the code here. Instead, you can download the full source code from the link mentioned at the end of this article.
Let's get started!
Here, person is a component. You can edit, insert or view that person. The same component can have multiples views.
The component is created using the list layout.
  1. <fsl-pessoa layout="lista-edicao"
  2. model="$ctrl.pessoas"
  3. on-event="$ctrl.onChanges(pessoa, evento, index)"></fsl-pessoa>
Each component has some properties.
  1. "layout" - the layout name for component. There are two layouts: one is the list of persons; second is the edit of a person.
  2. "model" - the object model to populate the component.
  3. "on-event" - the change event of the component.
The component using the edit layout.
  1. <fsl-pessoa layout="edicao"
  2. model="$ctrl.pessoa"
  3. on-event="$ctrl.onChanges(pessoa, evento, index)"></fsl-pessoa>
Defining the Angular Component.
  1. (() => {
  3. class PessoaComponent implements ng.IComponentOptions {
  5. bindings: { [binding: string]: string };
  6. controller = App.Pessoa.PessoaComponentController;
  8. templateUrl = ['util', '$attrs', (util: App.IUtilProvider, $attrs: ng.IAttributes) => {
  9. return util.buildTemplateUrl('pessoa/pessoa', $attrs['layout'] || '');
  10. }];
  12. constructor() {
  13. this.bindings = {
  14. model: '<',
  15. onEvent: '&'
  16. };
  17. }
  19. }
  21. angular
  22. .module('app.pessoa')
  23. .component('fslPessoa', new PessoaComponent());
  25. })();
The Angular component's Controller.
  1. namespace App.Pessoa {
  3. export class PessoaComponentController implements ng.IComponentController {
  5. model: App.Pessoa.IPessoa | App.Pessoa.IPessoa[];
  6. pessoa: App.Pessoa.IPessoa;
  7. pessoas: App.Pessoa.IPessoa[];
  8. onEvent: (values: any) => void;
  10. constructor(
  11. private util: App.IUtilProvider
  12. ) {
  14. }
  16. $onInit = () => {
  17. this.receberModel(this.model);
  18. }
  20. $onChanges = (changes) => {
  21. if (!changes.model.isFirstChange()) {
  22. this.receberModel(changes.model.currentValue);
  23. }
  24. }
  26. incluirPessoa = () => {
  27. var pessoa = this.criarNovaPessoa();
  28. this.pessoas.push(pessoa);
  29. this.dispararEvento("incluir", pessoa);
  30. }
  32. excluirPessoa = (pessoa: App.Pessoa.IPessoa) => {
  33. var index = this.pessoas.indexOf(pessoa);
  34. this.pessoas.splice(index, 1);
  35. this.dispararEvento("excluir", pessoa);
  36. }
  38. editarPessoa = (pessoa: App.Pessoa.IPessoa) => {
  39. this.dispararEvento("editar", pessoa);
  40. }
  42. salvarPessoa = () => {
  43. this.dispararEvento("salvar", this.pessoa);
  44. this.pessoa = this.criarNovaPessoa();
  45. }
  47. private criarNovaPessoa = () => {
  48. return {
  49. id: this.util.generateGuid()
  50. }
  51. }
  53. private dispararEvento = (evento: string, pessoa: App.Pessoa.IPessoa, index?: number) => {
  54. if (angular.isDefined(this.onEvent)) {
  55. this.onEvent({ pessoa: pessoa, evento: evento, index: index });
  56. }
  57. }
  59. private receberModel = (model: App.Pessoa.IPessoa | App.Pessoa.IPessoa[]) => {
  60. if (model) {
  61. if (angular.isArray(model)) {
  62. this.pessoas = <App.Pessoa.IPessoa[]>model;
  63. } else {
  64. angular.copy(<App.Pessoa.IPessoa>model, this.pessoa);
  65. }
  66. }
  68. this.pessoa = this.pessoa || this.criarNovaPessoa();
  69. this.pessoas = this.pessoas || [];
  70. }
  72. }
  74. PessoaComponentController.$inject = [
  75. 'util'
  76. ];
  78. }
Basically, Angular component best practices must be.
  1. Stateless don't change the model outside the component
  2. Events if any changes occusr inside a component, fire them using events
  3. Reusable create the component to be reusable anywhere
The Angular Life Cycle events*.
  1. "constructor" in the creation;
  2. $onInit in first init;
  3. $onChanges when the model changes inside or outside the component;
There are other events. For more information, please check Angular API reference.
Very Important
In the component (code), fire the custom event passing the parameters inside an object.
  1. this.onEvent({ pessoa: pessoa, evento: evento, index: index });
In usage of component (html), declare the custom event using the same parameter name and order.
  1. on-event="$ctrl.onChanges(pessoa, evento, index)"
In code callback (code), receive the custom event using the same parameter name and order.
  1. onChanges = (pessoa: App.Pessoa.IPessoa, evento: string) => {
  3. console.log(evento, this.pessoa);
  5. }
From here, you can download full source code.