-
Notifications
You must be signed in to change notification settings - Fork 39
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(components): update documentation on components
- Loading branch information
1 parent
e9e9af7
commit 0f1188f
Showing
4 changed files
with
80 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
# Component introduction | ||
|
||
A component refers to a modular, reusable piece of code that encapsulates specific functionality, styling, and behavior within a user interface (UI). Components are commonly used to build dynamic and interactive web applications, allowing developers to break down complex user interfaces into smaller, manageable parts. | ||
|
||
## How to generate a component | ||
|
||
```shell | ||
ng g component ComponentName | ||
``` | ||
|
||
## Structure | ||
Below you can see the basic files generated for a component (more files can be generated depending on the activated options): | ||
- `component-name.component.ts` will contain component logic | ||
- `component-name.spec.ts` will contain component unit tests | ||
- `component-name.style.scss` will contain component styling | ||
- `component-name.template.html` will contain component structure | ||
|
||
> [!NOTE] | ||
> By convention, file names must be written in kebab-case | ||
|
||
## Component class | ||
Otter component are Angular component with Otter specific information provided through the `@O3rComponent` decorator. | ||
```typescript | ||
@O3rComponent({ | ||
componentType: 'Component' | ||
}) | ||
@Component({ | ||
selector: 'o3r-component-name', | ||
standalone: true, | ||
templateUrl: './component-name.template.html', | ||
styleUrls: [./component-name.style.scss'], | ||
encapsulation: ViewEncapsulation.None, | ||
changeDetection: ChangeDetectionStrategy.OnPush | ||
}) | ||
export class ComponentNameComponent {} | ||
``` | ||
The object passed to the `@O3rComponent` decorator includes the component type, it can be: | ||
- a `Block`, a component that handle functional area. | ||
- a `Page`, a component that display an application route. | ||
- an `ExposedComponent`, a component that needs to be exposed in your CMS. | ||
- a `Component`, a component that does not need to be exposed in your CMS. | ||
> [!NOTE] | ||
> By convention, class names mu be written in PascalCase and variable names in camelCase. | ||
> [!TIP] | ||
> The Otter framework provides an [Otter Chrome Extension](https://chrome.google.com/webstore/detail/otter-devtools/aejabgendbpckkdnjaphhlifbhepmbne) to help debug the application. | ||
> To enable the communication between your application and the Chrome Extension you can follow this [documentation](../dev-tools/chrome-devtools.md). | ||
## Next steps | ||
To test your component, you can look to the [fixtures documentation](./FIXTURES.md). | ||
In case you need to handle different UI flavors or to share a flavor with different logics, we recommend to use the [container / presenter](./CONTAINER_PRESENTER.md) patterns. | ||
In case you need to replace component at runtime, you can have a look to the [component replacement](./COMPONENT_REPLACEMENT.md) mechanism. |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters