angular-components

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: <div class="header-css-class"> <ng-content select="#header"></ng-content> </div> <div class="body-css-class"> <ng-content select="#body"></ng-content> </div> I am trying to use this component in another place and render two differents HTML code inside body and header select of ng-content, something like this: <div #header>This should be rendered in header selection of ng-content</div> <div #body>This should be rendered in body selection of ng

I'm new to Angular and currently using version 1.6. I'm implementing the component style of Angular. I just want to ask what's the best way to communicate from parent to child components? I know there is an existing question but I have a specific scenario (I'm not sure if it's unique or not). Here is the scenario: Modal -> create new todo -> Parent ( update the object ) -> personal todo ( update the list ) I have a modal for creating todo. Then after creating new todo pass the value on the parent to update the object of todo. And when I updated the parent list of todo pass to the personal todo

I went through angular dynamically loading components. But i could not find how to remove the component dynamically. My requirement is that the chat application loads dynamic component(image/graph/list/table) as per the conversation. But how can i destroy the component if the conversation moves forward. I am trying to destroy dynamic component with external event. Please help how to proceed. EDIT: https://stackblitz.com/angular/emjkxxxdxmk?file=src%2Fapp%2Fad-banner.component.ts I developed my code according to this example. Instead of time interval, I need to use a API call from a service

I have a toast notification component called ToastComponent which I want to call from any other component. I implemented it like this: ToastComponent : export class ToastComponent implements OnInit { constructor() {} showToast() { // some code } } app.component.html : <llqa-main-container> <llqa-header></llqa-header> <div class="content-container"> <main class="content-area"> <llqa-toast></llqa-toast> <!-- ToastComponent which I want to call --> <router-outlet></router-outlet> </main> </div> </llqa-main-container> UserManagementComponent which is inside the <router-outlet> : export class

I have next HTML // This is parent <div class="some-class"> // This is child <totalizer</totalizer> </div> How can I change parents style ( add new class ) from child? You can use an EventEmitter @Output() property that signals the parent component to add/remove a css class dynamically using ngClass . In your child totalizer component, define, @Output() cssRefresh = new EventEmitter<boolean>(); //when you need to add/remove css emit an event out to the parent like this // (preferably in a method in this component), this.cssRefresh.emit(true); // or 'false' depending on add/remove Then in the

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? No! There is no command which will change the name of all files generated using component create command. So created ts , html , css/scss , .spec.ts files need to be manually renamed/edited. I am a frequent user of angular cli and I think this is a nice to have command as some time we just create angular components and need to rename it. As this rename command is not there, deleting the created angular component,