Questions tagged [angular-components]

A component controls a patch of screen called a view. Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at run time.

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.You can see more information on components here

2024 questions
15
votes
1 answer

Why is Angular component not loading on browser back/forward navigation?

Angular 7.2.13 When navigating with the browser back button, the HTML of the component is loaded, but the component css/js is not loaded, and the page hangs. However loading works fine when navigated by a link click or router.navigateByUrl() or if…
Emmanuel
  • 4,933
  • 5
  • 46
  • 71
15
votes
2 answers

Angular pass a Component as ng-template of another Component

In my Angular 6 app I need to pass a Component to another Component as its ng-template. The reason is that I have a Component A that I need to replicate many times, but each time it has to include different components (let's call them Component B…
Francesco Borzi
  • 56,083
  • 47
  • 179
  • 252
15
votes
2 answers

How to remove WebStorm sass-lint error "Unknown pseudo selector 'ng-deep'"

Angular 2+ with scss and ::ng-deep in WebStorm highlights this selector with text "Unknown pseudo selector 'ng-deep'" I tried something like: selector-pseudo-class-no-unknown: true ignorePseudoClasses:…
Adam Michalski
  • 1,722
  • 1
  • 17
  • 38
14
votes
4 answers

MatFormFieldControl that implements ControlValueAccessor and Validator creates cyclic dependency

I'm trying to create custom form control by implementing MatFormFieldControl, ControlValueAccessor and Validator interfaces. However, when I provide NG_VALUE_ACCESSOR or NG_VALIDATORS.. @Component({ selector: 'fe-phone-number-input', …
Martin
  • 1,877
  • 5
  • 21
  • 37
14
votes
2 answers

Consuming multiple properties via Input decorator in angular 2

I have this component that receives two inputs via its selector, but this can be extended to any number of inputs and any component. So, in quest of consuming multiple properties in the component itself a single @Input() decorator did not allow me…
Umair Sarfraz
  • 5,284
  • 4
  • 22
  • 38
14
votes
1 answer

Angular2 Not Recognizing component From Imported Module

I'm playing around with Angular2, and trying to have one module (BreadcrumbDemoModule) import the component of another (BreadcrumbModule). Currently, BreadcrumbModule contains only one component: ng2-breadcrumb. However when I try to use this…
SemperCallide
  • 1,950
  • 6
  • 26
  • 42
13
votes
8 answers

angular material dialog mat-dialog-actions position

I'm using Angular Material Dialog component, with mat-dialog-content and mat-dialog-actions to display a footer with action buttons. If I set a height of the dialog (e.g 80%), the dialog-actions is weirdly higher than the default. Here is a forked…
user2010955
  • 3,871
  • 7
  • 34
  • 53
13
votes
10 answers

Angular component: disable click event

I am creating a reusable component like this one: submit I would like to disabled the click event when the property isDisabled is true, I tried something like that but it…
Gelso77
  • 1,763
  • 6
  • 30
  • 47
13
votes
2 answers

Angular Material Tabs not working with wrapper component

We are developing a corporate component library which should provide Material Designed Angular Components. So the users of this library are not supposed to use e.g. Angular Material directly but rather include some component like…
13
votes
3 answers

How can I use @HostListener('window:beforeunload') to call a method?

I am trying to call a post method I made myself before my component is unloaded, but it doesn't work. I put a breakpoint on @HostListener and it doesn't break there when I open a different component. I'm using Chrome to debug and I turned on Event…
Friso
  • 2,328
  • 9
  • 36
  • 72
13
votes
2 answers

Easy way to create / generate new Angular component in Visual Studio IDE?

Working on ASP.NET core project (Angular) & Visual Studio as my IDE. Is there an easy way to generate Angular component files and register the new component in the app module in Visual Studio?
13
votes
2 answers

How to dynamically change CSS in :host in angular 2?

How do I dynamically change CSS properties of a component host? I have a component and in it's CSS I have given it a stlye: :host { overflow-x: hidden } On a button click from child component, I need to add overflow-y: hidden to the host…
code1
  • 8,351
  • 8
  • 27
  • 31
13
votes
3 answers

How to annotate ngdoc for an Angular component?

I'm writing an AngularJS component and I was wondering what's the correct way to add ngdoc annotation both to the component itself and to the controller function. Do you have any examples?
gabric
  • 1,865
  • 2
  • 21
  • 32
12
votes
2 answers

ngOnChanges not called in Angular 4 unit test detectChanges()

The question I have a button component that accepts a promise and disables the button until the promise has resolved and I want to write a unit test for this functionality. My Code My button component has an input for the promise /** * A single…
12
votes
4 answers

Duplicate "id" attribute in Angular 2 component

Context I'm writing a custom Angular component for a checkbox. The component renders a checkbox tag along with a label tag. The "id" attribute of the checkbox and the "for" attribute of the label are both set to the component's id property (an…
Elliot
  • 1,463
  • 1
  • 14
  • 14