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

1763 questions
653
votes
20 answers

What is the equivalent of ngShow and ngHide in Angular 2+?

I have a number of elements that I want to be visible under certain conditions. In AngularJS I would write
stuff
How can I do this in Angular 2+?
Mihai Răducanu
  • 9,553
  • 4
  • 19
  • 28
616
votes
14 answers

How can I select an element in a component template?

Does anybody know how to get hold of an element defined in a component template? Polymer makes it really easy with the $ and $$. I was just wondering how to go about it in Angular. Take the example from the tutorial: import {Component} from…
Aman Gupta
  • 6,735
  • 5
  • 13
  • 24
313
votes
19 answers

How to style child components from parent component's CSS file?

I've got a parent component: And I want to populate this group with child components: Parent template:
Chrillewoodz
  • 22,596
  • 18
  • 73
  • 147
216
votes
9 answers

How to rename a component in Angular CLI?

Is there any shortcut to rename a component with the Angular CLI other than manually editing all the component files such as folder name, .css, .ts, spec.ts and app.module.ts?
Thomas Easo
  • 2,629
  • 2
  • 13
  • 25
207
votes
6 answers

Angular 2: How to style host element of the component?

I have component in Angular 2 called my-comp: How does one style the host element of this component in Angular 2? In Polymer, You would use ":host" selector. I tried it in Angular 2. But it doesn't work. :host { display:…
Ravi Teja Gudapati
  • 2,363
  • 2
  • 11
  • 15
174
votes
7 answers

Call child component method from parent class - Angular

I have created a child component which has a method I want to invoke. When I invoke this method it only fires the console.log() line, it will not set the test property?? Below is the quick start Angular app with my changes. Parent import {…
shammelburg
  • 5,386
  • 7
  • 24
  • 34
167
votes
16 answers

Angular 2 'component' is not a known element

I'm trying to use a component I created inside the AppModule in other modules. I get the following error though: "Uncaught (in promise): Error: Template parse errors: 'contacts-box' is not a known element: If 'contacts-box' is an Angular…
Aranha
  • 2,153
  • 3
  • 11
  • 26
151
votes
6 answers

What is entryComponents in angular ngModule?

I am working on an Ionic app ( 2.0.0-rc0 ) which depends on angular 2 . So the new introduction of ngModules is included. I am adding my app.module.ts. below. import { NgModule } from '@angular/core'; import { IonicApp, IonicModule } from…
raj
  • 5,493
  • 5
  • 26
  • 49
134
votes
6 answers

Multiple ng-content

I am trying to build a custom component using multiple ng-content in Angular 6, but this is not working and I have no idea why. This is my component code:
Lucas Santos
  • 2,060
  • 2
  • 13
  • 23
75
votes
27 answers

Generating Component without spec.ts file in Angular 2+

Is there a way to get rid of the spec.ts file in Angular 2+, whenever I create a new component. I know this is for testing purpose but what if I don't need it. May be there is some setting to disable this specific testing file.
saadeez
  • 1,088
  • 1
  • 9
  • 15
51
votes
5 answers

Declare a component with generic type

Is it possible to declare a component with a generic type in Angular 4? The following code causes build errors: export class MyGenericComponent implements OnInit { @Input() data: BehaviorSubject; //... } The error when executing…
Strider
  • 2,717
  • 4
  • 20
  • 48
46
votes
8 answers

No provider for ControlContainer - Angular 5

I am converting a purchased, third-party template into an Angular 5 app, and just ran into an error. I am very new to Angular 5 (I know AngularJS well however) and don't understand what it's trying to tell me? It seems to be related to a button…
Todd Davis
  • 5,493
  • 9
  • 47
  • 80
44
votes
5 answers

How to Update a Component without refreshing full page - Angular

My Page structure is: How can I update/refresh the app-header component, without refreshing the whole page? I want to hide a "Sign-In" link in the header, once the…
Aravinthan M
  • 698
  • 1
  • 7
  • 22
38
votes
5 answers

Angular 2 - Passing data to Child component after Parent initialisation

I have a parent component which is getting data from a server through a service. I need some of this data to be passed to the Child component. I've been trying to pass this data with the usual @Input() however as I expected the data I'm getting in…
Daniel Grima
  • 2,396
  • 5
  • 29
  • 53
30
votes
4 answers

"Edit / Delete" button for each row & header column is 'Action' in the md-table component

I am quite new in the angular 4 world and I'm trying to add "Edit / Delete" button for each row & header column is 'Action' in the md-table component in Angular Material design with Angular 4. how can I do this? customized header column & buttons…
1
2 3
99 100