I've written apps on nearly every major UI platform for the past 30 years and Angular 9 is the best. Once understood, you realize you are doing it right when you code is incredibly terse and expressive. No state management needed if you just use Observables in service with Subjects (often ReplaySubjects). Your services express the state and how it maps, both ways, to the backend, the templates (especially when using "data$ | async") are what a UI should be - a rendering of the current UI State, streaming.
You can have the one-file experience in Angular easily. When you create a new project, use -t -s and anytime you use ng g c Foo, it will generate two files - component and spec. For existing apps, ng g with -s -t will make two files instead of 4. The component uses the "template" and "style" attributes instead of "templateUrl" and "styleUrl". One downside to that approach is that style is only CSS, not SCSS. If you need SCSS, you must use a separate .scss file. However, unexpectedly, I consider anytime I have to do this a bad smell.
Angular kind forces you, once you learn it, into very terse and expressive scss too. Any use of SCSS outside of styles.scss (and it's imports) is a bad smell (in structure and in bundle size). Moreover, in general, the less CSS at the component level, the better. This is my favorite line and most common line in my angular components:
styles:[``]
More commonly, I have CSS in styles, but only for layout. CSS in components should be limited to layouts - flex/grid/widths, etc. Using anything else and you themes are likely broken.
Ideally, and it's such a sweet easy ideal to acheive, component styles should come from CSS theme variables defined in styles.scss and available to all components. Like so:
// Using material theming...
in styles.scss (or an import of):
$primary: mat-color(map-get($theme, primary));
--primary-color: #{$primary};
.my-card {
color: var(--primary-color)
}
In the component:
<!-- Look ma, no CSS! -->
Anything other styling, that's not layout specific to this component, is not DRY.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I've written apps on nearly every major UI platform for the past 30 years and Angular 9 is the best. Once understood, you realize you are doing it right when you code is incredibly terse and expressive. No state management needed if you just use Observables in service with Subjects (often ReplaySubjects). Your services express the state and how it maps, both ways, to the backend, the templates (especially when using "data$ | async") are what a UI should be - a rendering of the current UI State, streaming.
You can have the one-file experience in Angular easily. When you create a new project, use -t -s and anytime you use ng g c Foo, it will generate two files - component and spec. For existing apps, ng g with -s -t will make two files instead of 4. The component uses the "template" and "style" attributes instead of "templateUrl" and "styleUrl". One downside to that approach is that style is only CSS, not SCSS. If you need SCSS, you must use a separate .scss file. However, unexpectedly, I consider anytime I have to do this a bad smell.
Angular kind forces you, once you learn it, into very terse and expressive scss too. Any use of SCSS outside of styles.scss (and it's imports) is a bad smell (in structure and in bundle size). Moreover, in general, the less CSS at the component level, the better. This is my favorite line and most common line in my angular components:
styles:[``]
More commonly, I have CSS in styles, but only for layout. CSS in components should be limited to layouts - flex/grid/widths, etc. Using anything else and you themes are likely broken.
Ideally, and it's such a sweet easy ideal to acheive, component styles should come from CSS theme variables defined in styles.scss and available to all components. Like so:
// Using material theming...
in styles.scss (or an import of):
$primary: mat-color(map-get($theme, primary));
--primary-color: #{$primary};
.my-card {
color: var(--primary-color)
}
In the component:
<!-- Look ma, no CSS! -->
Anything other styling, that's not layout specific to this component, is not DRY.