logo
down
shadow

Adding multiple component inside AppComponent in agular


Adding multiple component inside AppComponent in agular

By : JW2209
Date : September 06 2020, 02:00 PM
should help you out I guess you want to show the text appearing inside component tags to appear in the app-component. This is called content-projection and you can achieve this using the ng-content. Modify your code like this
code :
import { Component,Directive,ElementRef, APP_BOOTSTRAP_LISTENER } from '@angular/core';


@Component({
  selector: 'app-root',
  template: `
        <second-component>
           test second
        </second-component>
        <third-component>
           test third
        </third-component>


    `,
    styles: [`

    `]
})
export class AppComponent {


}

@Component({
  selector: 'second-componet',
  template: `
        <h1>
           test
        </h1>
        <ng-content></ng-content>
    `,
    styles: [`

    `]
})


export class SecondCompoent{

}

@Component({
  selector: 'third-componet',
  template: `
        <h1>
           test
        </h1>
        <ng-content></ng-content>
    `,
    styles: [`

    `]
})


export class ThirdCompoent{

}


Share : facebook icon twitter icon
purpose of app.component.ts (AppComponent) in ng2?

purpose of app.component.ts (AppComponent) in ng2?


By : Cuiller Assiete From
Date : March 29 2020, 07:55 AM
wish of those help Is an AppComponent class required for ng2 apps? Ng2 is component-driven but I was wondering if a component specifically named AppComponent is required. Is ng2 specifically wired up to start its flow in a class named AppComponent? , you can change the name to MyComponent and use it while bootstrap
code :
bootstrap(MyComponent, [...]).catch(err => console.error(err));
angular AppComponent loads after sub component

angular AppComponent loads after sub component


By : Zodir
Date : March 29 2020, 07:55 AM
This might help you I think the appData that you have is a dependency that you've injected in your PeopleComponent to get the data that AppComponent is getting from some REST API. It's a shared service that you've created to pass data between AppComponent and PeopleComponent. But they're having a Parent-Child relationship, you can simply pass data between them using an @Input property. So I'm not sure why you're doing that using a Shared Service.
Assuming from your OP, PeopleComponent is a child to the AppComponent, so you can simply pass people as an @Input() property to the PeopleComponent.
code :
...
<app-people [people]="people"></app-people>
...
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-people',
  templateUrl: './people.component.html',
  styleUrls: ['./people.component.css']
})
export class PeopleComponent implements OnInit {

  @Input() people: any;

  ngOnInit() {
    pre: this.people = this.people;
    this.getPeople();
  }

  getPeople(): any {
    console.log("people.component getPeople()");
  }

}
What is connection between AppComponent and @Component in AngularJs 2?

What is connection between AppComponent and @Component in AngularJs 2?


By : Max
Date : March 29 2020, 07:55 AM
this one helps. @Component() is a decorator and is applied to the class, member or variable directly following the decorator. Therefore because the @Component() decorator is immediately before the class AppComponent() it is applied to this class.
The expressions in template: '...' are evaluated in the scope of the class they are applied. title therefore refers to the title field in AppComponent
ERROR in AppComponent cannot be used as an entry component

ERROR in AppComponent cannot be used as an entry component


By : Christina Jensen
Date : March 29 2020, 07:55 AM
I wish did fix the issue. The @Component decoration should be used on the AppComponent not the Event.
Also check that AppComponent is declared on the AppModule.
Related Posts Related Posts :
  • How to update all ionic cordova plugin at one command in Ionic-V4
  • How to give dynamics values for [routerLink] which it corresponds to values of an array?
  • Add and delete item from an array
  • How to unit test a button within an ngfor
  • How to launch a method after a cell value has been edited in ag-grid?
  • Can't select individual user accounts when creating a new Asp.Net Core 2.1 Angular project in Visual Studio 2019
  • How do I get the response code in angular 7
  • Angular PrimeNg: p-table not detected using @ViewChild
  • How to route within the tab component in ionic
  • How can i combine data from two API's into datasource
  • Find the last index from the array using ngFor
  • ngSelect always return undefined
  • Nested Forms in Angular Material Stepper trigger a ExpressionChangedAfterItHasBeenCheckedError
  • Angular library dependency exposure
  • Handling errors with RxJS and Angular async pipe
  • Kubernetes internal CORS issues between services
  • Ionic set marker on location or based on longitude and latitude
  • CAN NOT expand Angular Material table
  • Share a angular library across multiple projects
  • How to import pipe to 2 modules(AppModule and ChildModule)?
  • How to disable the drag option on Angular material Slide toggle component
  • Does Spartacus support Hybris on-premise?
  • Bind regular expression from json to typescript
  • How can i get the selected value in ion-alert radio alert
  • How to get all attributes of an object
  • Using angular elements inside the same angular project
  • RxJS assign observable and get data in one stream
  • Why I can not use anguar/material elements?
  • Getting Error when running 'ng test' Command
  • How can I make another request within catchError?
  • angular 7 input number validation
  • Dont show digits after decimal using angular pipe
  • How to use same component in normal way and with angular material dialog both?
  • How to integrate ReSharper with WebStorm
  • Google cloud application yaml for angular 7
  • How to perform concurrent HTTP requests on rows of a table
  • Angular 7 - deploy workspace applications (projects) in isolation
  • how to turn off differential loading in Angular v8?
  • How to add and update npm packages for a new Angular app in Visual Studio 2019
  • Angular 7, Ngrx, Rxjs 6 - Accessing state between lazy loaded modules
  • cannot find symbol import com.google.firebase.iid.FirebaseInstanceIdService error in ionic3
  • AWS CodePipeline, build failed and getting error
  • CORS problem with Angular and laravel even after setting the CORS header and server response
  • Angular, when the variable is mentioned in the url, the variable is not replaced with its value. Ex: ${username}
  • How to apply two ngIf on single html element with two different conditions
  • Ionic not importing ngx-mathjax module
  • How to display base64 image on iPhone in Ionic 4
  • ngFor in columns with diferents properties
  • How catch the http errors with map
  • How to format a Date field in Angular project
  • focusing ng-select filter input on drop down open
  • Angular 7 PDFJS Component
  • NestJs Errors stemming from @types dependencies in node_modules when running start:prod on fresh project
  • How to override ion-back-button action in ionic 4 with angular 7
  • How can I have an array in input form?
  • Angular 6 component test with a variable into HTML
  • Why is ES7/array polyfill needed despite the tsconfig target is set to ES5
  • How to deal with Google recaptcha backend validation response delay
  • Logging in using @angular/fire/auth results in 403 error on localhost
  • In Angular, with ViewChild/ ViewChildren, how do I get the child of a child?
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk