angular
Repos
204

The modern web developer’s platform

86152
22124

Component infrastructure and Material Design components for Angular

23307
6295

CLI tool for Angular

25916
11869

Events

opened issue
docs-bug(COMPONENT): Theming

Documentation Feedback

I asked about this on Stackoverflow. The question is about how to avoid duplicating styles in Angular 15.

This is the question.

The answer is to only call @include mat.all-component-themes($theme); in the main theme, and then use @include mat.all-component-colors($theme); in subsequent themes like this.

However it seems to me that this will then leave out generated CSS code for the scope of that theme.

.dark-theme {
    //======================================
    // THEME INITIALIZATION
    //======================================
    @include mat.core-theme($theme);
    @include mat.all-component-themes($theme);
}
//and this being your secondary theme
.light-theme {
    //======================================
    // THEME INITIALIZATION
    //======================================
    @include mat.core-color($theme);  <---- This is the magic
    @include mat.all-component-colors($theme); <---- This is the magic
}

Some clarification on this in the documentation would be terrific.

Affected documentation page

https://material.angular.io/guide/theming

Created at 4 minutes ago
started
Created at 35 minutes ago
issue comment
bug(button): Palette contrast values are not applied

Just as an information for others facing an issue like this: There seems to be a change affecting "unthemed" buttons. A button in my application changed text-color after upgrading to angular material 15 from white to black. It is placed on a dark background. I found this issue and assumed it was caused by this. Just give it a try and give your button a color attribute if it has none and select primary, accent or warn depending on your background. You can use mat-flat-button and then the correct contrast color is selected. Definitely not a solution for everybody but worked for me.

Created at 1 hour ago
pull request opened
docs: Improve previous version navigation

In archive mode the link to the current doc will point to same page. If the page doesn't exist anymore, it will show a contextualized warning message.

See #46850

PR Type

What kind of change does this PR introduce?

  • [x] Documentation content changes
Created at 1 hour ago
issue comment
fix(material/chips): add opt-out for single-select checkmarks

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Created at 1 hour ago
Created at 3 hours ago
issue comment
fix(material/input): changes on label detected correctly

Made changes on MatFormFieldNotchedOutline and MatFormField to update correctly when mat-label updates.

Tested with dev-app:

Now, on start: after-label1

After update label (to empty string) after-label2

Created at 3 hours ago
started
Created at 3 hours ago
pull request opened
feat(core): Error logs links point to the archived version of the docs

In order to point the right context, links in error messages will target the archived version of the online doc site (v*.angular.io).

See #44650

PR Type

What kind of change does this PR introduce?

  • [x] Feature

Does this PR introduce a breaking change?

  • [ ] Yes
  • [x] No
Created at 3 hours ago
Created at 4 hours ago
Created at 5 hours ago
Created at 5 hours ago
started
Created at 5 hours ago
issue comment
Reactive Form when settings SetErrors on formControl and doing NgIf error disappears.

I'd say this behaviour is expected.

*ngIf="false" will destroy the form which will then trigger onDestroytheFormGroup` directive, which will trigger the validators. The validators will reset the errors.

When the error is set by a validator, the error object is not reset to null.

Created at 5 hours ago
issue comment
Unit testing: directives on ng-template present but not detectable with By.directive

Isn't that pretty much expected ? Your component has no children.

Your ng-template points to nothing, it will not exist in the dom. But if you add a div with the directive, instantiate your template (with ngTemplateOutlet for example) it will work.

Created at 6 hours ago
started
Created at 6 hours ago
started
Created at 6 hours ago
Created at 6 hours ago
pull request closed
docs: What gets inserted before ngOninit

https://github.com/angular/angular/issues/48451

I had raised above issue and it came out that there should not be any expectation about what happens before ngOnInit.

PR Checklist

Please check if your PR fulfills the following requirements:

  • [ ] The commit message follows our guidelines: https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit
  • [ ] Tests for the changes have been added (for bug fixes / features)
  • [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

  • [ ] Bugfix
  • [ ] Feature
  • [ ] Code style update (formatting, local variables)
  • [ ] Refactoring (no functional changes, no api changes)
  • [ ] Build related changes
  • [ ] CI related changes
  • [ x] Documentation content changes
  • [ ] angular.io application / infrastructure changes
  • [ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

  • [ ] Yes
  • [x ] No

Other information

Created at 7 hours ago
issue comment
docs: What gets inserted before ngOninit

Appreciate the PR attempting to clarify behaviors. However, I don’t believe this is the right direction for the documentation. We don’t want to write an exhaustive list of where not to do things. This list is always long or even infinite. Instead, the documentation’s goal is to provide guidance for where the correct place to perform a task would be. For accessing the DOM, this is ngAfterViewInit, which is documented as the hook that is called after the component’s view has been fully initialized: https://angular.io/api/core/AfterViewInit

Created at 7 hours ago
started
Created at 7 hours ago
started
Created at 7 hours ago
started
Created at 7 hours ago
closed issue
docs-bug(Resolve): Show how to inject services with an in-line ResolveFn.

Documentation Feedback

The use of a class implementing Resolve<Hero> shows how to get a hero from the HeroService using return this.service.getHero(route.paramMap.get('id'));. The HeroService is injected in the constructor.

The inline function example for how to use a ResolveFn only shows how to return a constant hero. This avoids showing how to inject members into the Javascript function, which may not be known to the reader. Changing this example to also retrieve the Hero from a HeroService would help people who want to translate their Resolve class into a ResolveFn.

I'm suggesting replacing:

export const myHero: Hero = {
  // ...
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'detail/:id',
        component: HeroComponent,
        resolve: {
          hero: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => myHero
        }
      }
    ])
  ],
})
export class AppModule {}

with

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'detail/:id',
        component: HeroComponent,
        resolve: {
          hero: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
            const service = inject(HeroService);
            return service.getHero(route.paramMap.get('id'));
          }
        }
      }
    ])
  ],
})
export class AppModule {}

Affected documentation page

https://angular.io/api/router/Resolve

Created at 7 hours ago
issue comment
docs-bug(Resolve): Show how to inject services with an in-line ResolveFn.

Closing as completed. The Resolve interface will be deprecated in v15.2 so expanding the documentation isn't a priority. The ResolveFn has an example of injecting a service: https://next.angular.io/api/router/ResolveFn

Created at 7 hours ago
issue comment
issue with lazy loading standalone components

Please provide a reproduction. The description doesn't sound like this is related to standalone components at all and I'm also not sure what exactly is being described. Using a standalone component in the loadChildren routes does return the "full" URL https://stackblitz.com/edit/angular-vhroeq?file=src%2Fmain.ts. This should always be the behavior unless you've managed to do something like provide the a second instance of the Router.

Created at 7 hours ago
issue comment
Error in complilation ERROR in node_modules/@angular/fire/firebase.app.module.d.ts:2:10 - error TS2614

Also for Angular 15, the following is working (upgrading from 8 -> 9 solved my issue)

"dependencies": {
  ...other angular deps...
  "@angular/core": "^15.1.2",
  "@angular/fire": "^7.5.0",
  ...other deps...
  "firebase": "^9.17.1", // used `npm install firebase` to bring up to latest version after manually switching to 9
 }
 ``
                                
Created at 8 hours ago
Created at 8 hours ago
Created at 8 hours ago