Every rendered angular component is wrapped in a host element (which is the same as component’s selector).

It is possible to bind properties and attributes of host element using @HostBinding decorators, e.g.

import { Component, HostBinding } from '@angular/core';

@Component({
   selector: 'my-app', 
   template: `
    <div>Use the input below  to select host background-color:</div>
    <input type="color" [(ngModel)]="color"> 
  `,
  styles: [
    `:host { display: block; height: 100px; }`
  ]
})
export class AppComponent {
  @HostBinding('style.background') color = '#ff9900';
}

继续阅读 30秒学会 Angular 片段 – Bind to host properties with host binding

Renders a table with rows dynamically created from an array of objects and a list of property names.

  • Use Object.keys(), Array.prototype.filter(), Array.prototype.includes() and Array.prototype.reduce() to produce a filteredData array, containing all objects with the keys specified in propertyNames.
  • Render a <table> element with a set of columns equal to the amount of values in propertyNames.
  • Use Array.prototype.map to render each value in the propertyNames array as a <th> element.
  • Use Array.prototype.map to render each object in the filteredData array as a <tr> element, containing a <td> for each key in the object.

This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in propertyNames

继续阅读 30秒学会 React 片段 – MappedTable

Renders a button that animates a ripple effect when clicked.

  • Define some appropriate CSS styles and an animation for the ripple effect.
  • Use the React.useState() hook to create appropriate variables and setters for the pointer’s coordinates and for the animation state of the button.
  • Use the React.useEffect() hook to change the state every time the coords state variable changes, starting the animation.
  • Use setTimeout() in the previous hook to clear the animation after it’s done playing.
  • Use the React.useEffect() hook a second time to reset coords whenever the isRippling state variable is false.
  • Handle the onClick event by updating the coords state variable and calling the passed callback.
  • Finally, render a <button> with one or two <span> elements, setting the position of the .ripple element based on the coords state variable.

继续阅读 30秒学会 React 片段 – RippleButton

With ng-content you can pass any elements to a component.
This simplifies creating reusable components.

@Component({
  selector: 'wrapper',
  template: `
    <div class="wrapper">
      <ng-content></ng-content>
    </div>
  `,
})
export class Wrapper {}
<wrapper>
  <h1>Hello World!</h1>
</wrapper>

继续阅读 30秒学会 Angular 片段 – ng-content

Generally we get one service instance per the whole application.
It is also possible to create an instance of service per component or directive.

@Component({
  selector: 'provide',
  template: '<ng-content></ng-content>',
  providers: [ Service ]
})
export class ProvideComponent {}
@Directive({
  selector: '[provide]',
  providers: [ Service ]
})
export class ProvideDirective {}

继续阅读 30秒学会 Angular 片段 – Component level providers

Renders a component with collapsible content.

  • Use the React.setState() hook to create the isCollapsed state variable with an initial value of props.collapsed.
  • Use an object, style, to hold the styles for individual components and their states.
  • Use a <div> to wrap both the <button> that alters the component’s isCollapsed state and the content of the component, passed down via props.children.
  • Determine the appearance of the content, based on isCollapsed and apply the appropriate CSS rules from the style object.
  • Finally, update the value of the aria-expanded attribute based on isCollapsed to make the component accessible.

继续阅读 30秒学会 React 片段 – Collapse

Renders a password input field with a reveal button.

  • Use the React.useState() hook to create the shown state variable and set its value to false.
  • Use a<div> to wrap both the<input> and the <button> element that toggles the type of the input field between "text" and "password".

继续阅读 30秒学会 React 片段 – PasswordRevealer

Renders a tree view of a JSON object or array with collapsible content.

  • Use object destructuring to set defaults for certain props.
  • Use the value of the toggled prop to determine the initial state of the content (collapsed/expanded).
  • Use the React.setState() hook to create the isToggled state variable and give it the value of the toggled prop initially.
  • Return a <div> to wrap the contents of the component and the <span> element, used to alter the component’s isToggled state.
  • Determine the appearance of the component, based on isParentToggled, isToggled, name and Array.isArray() on data.
  • For each child in data, determine if it is an object or array and recursively render a sub-tree.
  • Otherwise, render a <p> element with the appropriate style.

继续阅读 30秒学会 React 片段 – TreeView

Renders a tabbed menu and view component.

  • Define a TabItem component, pass it to the Tab and remove unnecessary nodes expect for TabItem by identifying the function’s name in props.children.
  • Use the React.useState() hook to initialize the value of the bindIndex state variable to props.defaultIndex.
  • Use Array.prototype.map on the collected nodes to render the tab-menu and tab-view.
  • Define changeTab, which will be executed when clicking a <button> from the tab-menu.
  • changeTab executes the passed callback, onTabClick and updates bindIndex, which in turn causes a re-render, evaluating the style and className of the tab-view items and tab-menu buttons according to their index.

继续阅读 30秒学会 React 片段 – Tabs