Function: MnSubComponent

▸ MnSubComponent<T>(config): (target: DecoratorTarget, targetKey?: string | symbol, indexOrPropertyDescriptor?: number | TypedPropertyDescriptor<unknown>) => void

Decorator that mark a property as a sub-component.

A sub-component is a component that is used inside another component. It provides a way to split a component into smaller components by doing composition.

The sub-component property must be of type SubComponent to be able to enable/disable the sub component.

Example

Add 2 phone call components to a record page linked to the telephone1 and telephone2 columns.

@MnComponent({
   scope: {
      pageType: "record",
   }
})
export class PhoneCallComponent implements Input, Config {
   @MnInput()
   input: {
     phoneColumn: string;
     phoneCommand: string;
   }

   @MnConfig(i => i)
   config: {
      phoneColumn: string;
      phoneCommand: string;
   }

   @MnOnCommandInvoke(c => c.phoneCommand)
   onCall(eventArg: CommandBarEventArgs) {
     const phoneAttr = eventArg.selectedRecord.getAttribute(this.config.phoneColumn);
     const phone = phoneAttr.getValue();
     Xrm.Navigation.openUrl({ url: `tel:${phone}` });
   }
}

@MnComponent({
   scope: {
      pageType: "record",
      table: "contact"
   }
})
export class AppComponent {
   @MnSubComponent({
      component: PhoneCallComponent,
      input: {
         phone: "telephone1",
         phoneCommand: "callPhone1"
      }
   })
   phoneCall1Component: SubComponent<PhoneCallComponent>;

   @MnSubComponent({
      component: PhoneCallComponent,
      input: {
         phone: "telephone2",
         phoneCommand: "callPhone2"
      }
   })
   phoneCall2Component: SubComponent<PhoneCallComponent>;
}

Example

Transmits the input from the parent component to the sub component. Uses ConfigOf to get the type of the parent component configuration during transmission.

@MnComponent({
   scope: {
      pageType: "record"
   }
})
class ParentComponent implements Config {
   @MnConfig({
      value1: "hello",
      value2: 123
   })
   config: {
      value1: string;
      value2: number;
   }
   
   @MnSubComponent({
      component: ChildComponent,
      input: (c: ConfigOf<ParentComponent> => { text: c.value1 })
   })
   childComponent: SubComponent<ChildComponent>;
}

@MnComponent({
   scope: {
      pageType: "record"
   }
})
class ChildComponent implements Input {
   @MnInput()
   input: {
      text: string;
   }

Type parameters

Name	Type
T	extends ComponentConstructor

Parameters

Name	Type	Description
config	SubComponentConfig<T>	Configuration of the sub component. Specify the component and the optional input. See SubComponentConfig

Returns

fn

▸ (target, targetKey?, indexOrPropertyDescriptor?): void

Parameters

Name	Type
target	DecoratorTarget
targetKey?	string | symbol
indexOrPropertyDescriptor?	number | TypedPropertyDescriptor<unknown>

Returns

void

Defined in

packages/core/src/core/metadata/sub-component.ts:140