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
19
votes
2 answers

Getting 'ngbCollapse' since it isn't a known property of 'div'. error after moving components into sub module

Error compiler.js:215 Uncaught Error: Template parse errors: Can't bind to 'ngbCollapse' since it isn't a known property of 'div'. ("][ngbCollapse]="isHidden"> I have a NavbarComponent and a FooterComponent that I want to move into the…
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
19
votes
1 answer

Angular form submit event firing twice between parent and child components

I have a strange problem where by the form submit event of my child form is firing twice on my parent form. child.component.html
...
child.component.ts @Component({ selector:…
Remotec
  • 10,304
  • 25
  • 105
  • 147
19
votes
4 answers

How to change parent variable from children component?

This question is quite simple but I can't get rid of it. I have a
in parent template and I need it disappear when displaying children template through routing module. What I expect is adding a class to the header tag so I can hide it via…
dkregen
  • 448
  • 2
  • 6
  • 16
18
votes
1 answer

Angular 2: Add directive to dynamically created component(s)

I came across the following Plunker to dynamically add and remove components. According to the above link and from many other SO posts, I know how to access Input and Output properties: this.compRef.instance.someProperty =…
Anvith
  • 477
  • 9
  • 22
18
votes
1 answer

Accessing nativeElement of a component by @ViewChild

Disclaimer: I just found out that my question is close to being a duplicate of this one: Angular get nested element using directive on parent The question in itself is not the same, but the accepted answer solves my problem My Problem: I want to…
Tobias Gassmann
  • 11,399
  • 15
  • 58
  • 92
18
votes
1 answer

Creating an angular2 component with ng-content dynamically

I would like to set the body of while instantiating a component dynamically using ComponentFactoryResolver. I see that I can get access to input & output using ComponentRef, but not a way to set . Please note
Ashok Koyi
  • 5,327
  • 8
  • 41
  • 50
18
votes
2 answers

Angular pass multiple templates to Component

I'm trying to create a component that accepts multiple templates as inputs. This is the example I have: @Component({ selector: 'data-list', styles: [ require('./data-list.component.scss') ], template: `
Daniel Grima
  • 2,765
  • 7
  • 34
  • 58
18
votes
5 answers

Can't add a new component to my angular 2 app with typescript

I'm using Angular 2 CLI and I created the component "MyComponent" with the ng generate component MyComponent. As far as I know I have to add the component to the directive key-value-pair of the @Component decorator, but the typescript compilation…
Philip Feldmann
  • 7,887
  • 6
  • 41
  • 65
17
votes
1 answer

Pass Angular Reactive FormControls to Children Components

I have a parent component where I want to create and store my Reactive Form. There will be multiple Form Group instances in a Form Array. I want to pass the Form Controls from each Form Group to a Child Component but am having trouble figuring out…
17
votes
2 answers

Submitting form with enter key in Angular unit test

I'm writing a test for an Angular 4 component that is a login form. The form can be submitted by clicking on the "submit" button or by hitting enter in any input fields. This behaviour is dictated by the Angular form directive. I can write a test…
17
votes
3 answers

Angular Form validation on child components

I've written a dynamic form in which there is a main part and sub parts based on a type that's selected in the main part (widget.type). Showing and hiding the sub parts is done with an ngSwitch. HTML of the form looks like this:
Guido Neele
  • 778
  • 1
  • 7
  • 20
17
votes
2 answers

Angular 2 send data from component to service

My target is to send data from Angular component to service and use service methods to work on it. Example: export class SomeComponent { public data: Array = MyData; public constructor(private myService: MyService) { …
16
votes
7 answers

How to make a synchronous call in angular 5?

So, I was trying to get the solution of this problem. But, somehow I am unable to do so, May be because of the lack of knowledge in angular 5. This is my service: GetCurrentUserData(): Observable { return…
Just code
  • 13,553
  • 10
  • 51
  • 93
16
votes
3 answers

Is there a way to dynamically render different templates for an angular 1.5 component

I have a number of angular 1.5 components that all take the same attributes and data structure. I think they could be re-factored into a single component, but I need a way to dynamically choose a template based upon the interpolated value of the…
Joe
  • 4,852
  • 10
  • 63
  • 82
15
votes
6 answers

Angular Material: 'mat-dialog-content' is not a known element

Before marking this question as "duplicate", kindly hear me out since I'm stuck for hours with this problem. I've gone through the existing questions but could not find any solution. I'm learning Angular and have started with Angular 9+ and Angular…
Sajib Acharya
  • 1,666
  • 5
  • 29
  • 54