foo.component.ts 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. import { Component, Output, EventEmitter, Input } from '@angular/core';
  2. /**
  3. * FooComponent description
  4. *
  5. * See {@link AppModule|APP}
  6. */
  7. @Component({
  8. selector: 'app-foo',
  9. styles: [
  10. `
  11. .host {
  12. width: 100%;
  13. height: 4px;
  14. top: 0;
  15. position: fixed;
  16. left: 0px;
  17. }
  18. `
  19. ],
  20. template: `
  21. <div class="host">
  22. <div (click)="exampleOutput.emit({ foo: 'bar' })"></div>
  23. </div>
  24. `
  25. })
  26. export class FooComponent {
  27. /**
  28. * An example input
  29. * {@link BarComponent} or [BarComponent2]{@link BarComponent} or {@link BarComponent|BarComponent3}
  30. */
  31. @Input() exampleInput: string = 'foo';
  32. /**
  33. * An example required input
  34. */
  35. @Input({ required: true }) requiredInput: string;
  36. /**
  37. * An example aliased input
  38. */
  39. @Input('aliasedInput') aliasedInput: string;
  40. /**
  41. * An example aliased input using the object syntax
  42. */
  43. @Input({ alias: 'aliasedInput' }) objectAliasedInput: string;
  44. /**
  45. * An example aliased required input using the object syntax
  46. */
  47. @Input({ alias: 'aliasedInput', required: true }) aliasedAndRequired: string;
  48. /**
  49. * An example output
  50. */
  51. @Output() exampleOutput: EventEmitter<{ foo: string }> = new EventEmitter();
  52. /**
  53. * constructor description
  54. * @param {boolean} myprop description
  55. */
  56. constructor(public myprop: boolean) {}
  57. }