#How to combine two components?

16 messages · Page 1 of 1 (latest)

bitter sierra
#

hey I am new to Angular and have a very beginner question. I have setup a new angular project via ng cli. When I read the essentials the docs specified that html and css get their own .html and .css files. Ok but now how do I put and component inside another component? the html file does not allow me to import

polar shard
bitter sierra
#

yes

#

hello

polar shard
#

Add the component you want to use in the html to in import section of the component that is going to use it.

bitter sierra
#

and now just use the selector naming as tags?

#

in the html I mean

polar shard
#

Yup

bitter sierra
#

<todo-list-item></todo-list-item> is the selector and I just get the url to it on the frontend - ./todo-list-item.component.html

#

not the actual component

polar shard
#

I'm not sure what you mean

bitter sierra
#

i have imported it in the imports of the component where I want it to be. Now I go to the app.component.html file and use it as tags specifying the selectos - <todo-list-item></todo-list-item> but instead of the actual component html markup I get just the url to it on the frontend as a string

polar shard
#

Never seen that. What does the @Component decorator look like for that component?

bitter sierra
#

import { Component } from "@angular/core";

@Component({
standalone: true,
selector: 'todo-list-item',
template: './todo-list-item.component.html',
styles: './todo-list-item.component.css',
})
export class TodoListItem {

}

#

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, TodoListItem],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'day1Angular';
}

#

ok ok its not style its styleUrl and same for template OMG