How can I pass props down in Angular 2+ like React?

In react I can arbitrarily pass props down like so:

function SomeComponent(props) {
  const {takeOutProp, ...restOfProps} = props;
  return <div {...restOfProps}/>;
}

How can I do the same thing in Angular?

--

More specifically, I want to write a custom dropdown component and pass props down to a select box.

3 answers

  • answered 2017-11-15 00:22 Dmitry Grinko

    Actually it is not the answer on your question but perhaps it helps you. You can add one custom directive with all params you need.

    import { Directive, ElementRef } from '@angular/core';
    
    @Directive({
      selector: '[defaultConfig]'
    })
    export class DefaultDropdownConfigDirective {
        constructor(el: ElementRef) {
           el.nativeElement.style.backgroundColor = 'yellow';
           // your default config
    
        }
    }
    
    <my-dropdown defaultConfig></my-dropdown>
    

    For more details you can read this

  • answered 2017-11-15 04:27 Vivek Doshi

    In angular, if you want to pass data from parent to children you need to use @Input for that

    And from child to parent we need to use @Output


    Here is the simplest explanation :

    http://learnangular2.com/inputs/


    For more detail in depth read :

    https://angular.io/guide/component-interaction

  • answered 2017-11-15 12:24 estus

    As opposed to React components, Angular components aren't recompiled on input changes and use @Input property decorators to enable change detection. All properties that are expected to be passed should be explicitly defined as component inputs.

    There are no better options than this one for custom select component. It's possible to read static attributes from current component element and set them on nested component element, but this won't set up bindings.

    As for React recipe for deep props in wrapped components:

    const Baz = props => <p>{props.baz}</p>;
    const Bar = props => <Baz {...props} />;
    const Foo = props => <Bar {...props} />;
    

    This is usually handled by Angular DI and a hierarchy of injectors. A provider can be defined on respective injector in order to make data and behaviour available to nested components.