vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-11 21:33:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

docs(doc): update all readme files

Browse Source
This commit is contained in:
thomas
2023-09-24 22:48:08 +02:00
parent 3d1ce3f3ad
commit 73297529ff
61 changed files with 1610 additions and 1079 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/styling/README.md
View File

@@ -1,32 +1,13 @@
<h1>Customizable style</h1>
# Highly Customizable CSS
> Author: Thomas Laforge
Styling is an important part of a day job of a frontend developer often underestimated. In Angular application, I often see people use `@Input()` to customize the style of their component. But `@Input()` should be used only for the logic and we should use other technique for styling. We can take advantage of css variable and host-context.
### Run Application
In this challenge, you will need to use both to delete all `@Input()` from your code.
```bash
npx nx serve styling
```
Styling is an important aspect of a frontend developer's day job, but it is often underestimated. In Angular applications, I frequently see people using `@Input()` to customize the style of their components. However, `@Input()` should only be used for logic; and other techniques, such as CSS variables and host-context, should be used for styling.
### Documentation and Instruction
In this challenge, you will need to use both CSS variables and :host-context to remove all `@Input()` from your code.
### Constraints:
- In your final submission, your component should not contain any lines of code. All styling should be handled within the decorator _(or external css files if you prefer)_
### Submitting your work
1. Fork the project
2. clone it
3. npm ci
4. **nx serve styling**
5. _...work on it_
6. Commit your work
7. Submit a PR with a title beginning with **Answer:13** that I will review and other dev can review.
<a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A13+label%3Aanswer"><img src="https://img.shields.io/badge/-Solutions-green" alt="styling"/></a>
<a href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A13+label%3A"answer+author"'><img src="https://img.shields.io/badge/-Author solution-important" alt="styling solution author"/></a>
<!-- <a href="{Blog post url}" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/-Blog post explanation-blue" alt="styling blog article"/></a> -->
_You can ask any question on_ <a href="https://twitter.com/laforge_toma" target="_blank" rel="noopener noreferrer"><img src="./../../logo/twitter.svg" height=20px alt="twitter"/></a>
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/13-styling.md/).