mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
31479cfaa4
* [ADF-4152] Moved proc services cloud docs to subfolders * [ADF-4152] Fixed links in PS cloud docs * [ADF-4152] Added subfolders and checked links for extensions and insights docs * [ADF-4152] Moved proc services cloud docs to subfolders * [ADF-4152] Fixed links in PS cloud docs * [ADF-4152] Added subfolders and checked links for extensions and insights docs * [ADF-4152] Fixed links in Proc cloud, Insights and Extensions docs * [ADF-4152] Updated links in user guide * [ADF-4152] Fixed broken links in tutorials * [ADF-4152] Fixed remaining links in core docs * [ADF-4152] Fixed remaining links in proc services docs * [ADF-4152] Fixed remaining links in content services docs * [ADF-4152] Fixed links in breaking changes docs * [ADF-4152] Updated main README index page * [ADF-4152] Fixed glitches with preview ext component docs
47 lines
2.1 KiB
Markdown
47 lines
2.1 KiB
Markdown
---
|
|
Title: Customizing the Login component
|
|
Level: Intermediate
|
|
---
|
|
|
|
# Customizing the Login component
|
|
|
|
In this tutorial you will learn how to customize the [Login component](../core/components/login.component.md) following the technical documentation.
|
|
|
|
The task will be very simple. See the documentation for further details about customizing this component, along with examples.
|
|
|
|
## Locating the component into your application
|
|
|
|
Starting from an existing ADF application, the `Login` component, like any other component, is stored in a subfolder of the `app` folder. In the
|
|
[Alfresco Content App](https://github.com/Alfresco/alfresco-content-app)
|
|
it is stored in the `/src/app/components/login` path. In an ADF app created with [Yeoman](http://yeoman.io/)
|
|
it is stored in the `/src/app/login` path.
|
|
|
|
Once you have located the [Login component](../core/components/login.component.md) for your application, you can customize it as described below.
|
|
|
|
## Changing the header
|
|
|
|
As with every regular
|
|
[Angular Component](https://angular.io/guide/architecture-components),
|
|
you can customize the [Login component](../core/components/login.component.md) can be customised via CSS, HTML and Typescript. In this simple
|
|
example, we will customize the header (as described also in the
|
|
[technical documentation](../core/components/login.component.md)).
|
|
|
|
Open the [`login.component`](../core/components/login.component.md)`.html` file and change the content to match the following source code:
|
|
|
|
```html
|
|
<adf-login ...>
|
|
<adf-login-header><ng-template>My custom HTML for the header</ng-template></adf-login-header>
|
|
</adf-login>
|
|
```
|
|
|
|
After saving the file, the login form will look like this:
|
|
|
|
|
|
|
|
## More examples
|
|
|
|
As mentioned earlier, this is a very basic example and the [Login component](../core/components/login.component.md) can be customized
|
|
much more extensively than this. For a complete and detailed description, full of examples, check the
|
|
[technical documentation about the component](../core/components/login.component.md).
|
|
This describes every customization available for the [Login component](../core/components/login.component.md).
|