@loopback/docs/site/apidocs/core.application.component.md

Documentation files rendered at [https://loopback.io](https://loopback.io)

---
lang: en
title: 'API docs: core.application.component'
keywords: LoopBack 4.0, LoopBack 4, Node.js, TypeScript, OpenAPI
sidebar: lb4_sidebar
editurl: https://github.com/loopbackio/loopback-next/tree/master/packages/core
permalink: /doc/en/lb4/apidocs.core.application.component.html
---

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@loopback/core](./core.md) &gt; [Application](./core.application.md) &gt; [component](./core.application.component.md)

## Application.component() method

Add a component to this application and register extensions such as controllers, providers, and servers from the component.

**Signature:**

```typescript
component<T extends Component = Component>(componentCtor: Constructor<T>, nameOrOptions?: string | BindingFromClassOptions): Binding<T>;
```

## Parameters

<table><thead><tr><th>

Parameter


</th><th>

Type


</th><th>

Description


</th></tr></thead>
<tbody><tr><td markdown="1">

componentCtor


</td><td markdown="1">

[Constructor](./context.constructor.md)<!-- -->&lt;T&gt;


</td><td markdown="1">

The component class to add.


</td></tr>
<tr><td markdown="1">

nameOrOptions


</td><td markdown="1">

string \| [BindingFromClassOptions](./context.bindingfromclassoptions.md)


</td><td markdown="1">

_(Optional)_ Optional component name or options, default to the class name


</td></tr>
</tbody></table>

**Returns:**

[Binding](./context.binding.md)<!-- -->&lt;T&gt;

## Example


```ts

export class ProductComponent {
  controllers = [ProductController];
  repositories = [ProductRepo, UserRepo];
  providers = {
    [AUTHENTICATION_STRATEGY]: AuthStrategy,
    [AUTHORIZATION_ROLE]: Role,
  };
};

app.component(ProductComponent);
```