#child component angular 14 router

44 messages · Page 1 of 1 (latest)

wispy star
#

Please try to refine your question to something much more specific. Read #how-to-get-help .

broken girder
#

The way you can use a child component into a parent component, is by having firstly in the same folder. And adding them into the module that you are using.
For example I have a login.component.ts and html. But I have a login-button.component.ts and html.

In code this would look like this:
Login Component:

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent {
  // code that you want in here.
}

Login Component:

<div class="flex flex-wrap items-center justify-center rounded-tl-lg">
  <div class="sm:w-full pr-4 pl-4 md:w-1/2 pr-4 pl-4 col-md-offset-3 border border-solid shadow-2xl rounded-2xl">
    <h1 class="flex flex-wrap items-center justify-center pt-5">
      <b>Login with your credentials</b>
    </h1>
<!-- This under here is the child component in the parent component -->
    <app-login-button>
    </app-login-button>
  </div>
</div>
#

Login-Button Component:

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

@Component({
  selector: 'app-login-button',
  templateUrl: './login-button.component.html',
  styleUrls: ['./login-button.component.scss']
})
export class LoginButtonComponent {
  // code that you want here.
}

Login-Button Component:

<div class="flex items-center justify-center space-x-16 pb-5 pt-5">
  <div class="flex items-center justify-center space-x-16">
    <button
      class="inline-block align-middle text-center select-none border whitespace-no-wrap rounded py-1 px-3 leading-normal
      no-underline bg-blue-300 text-white hover:bg-blue-600 active:bg-blue-900"
      type="submit"
    >
      Login
    </button>
  </div>
</div>

Module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { LoginButtonComponent } from './login/login-button/login-button.component';

@NgModule({
    declarations: [
      LoginComponent,
      LoginButtonComponent,
    ],
    exports: [
        ArticleComponent
    ],
    imports: [
        CommonModule,
    ]
})
export class UserModule { }
#

I hope this helps!

#

All the classes that you see in my HTML's, you can ignore them. I'm using tailwindcss.

agile edge
#

So WhoKnows my goal is to use a router-outlet in py parent component for change the componenent with the route of my url

#

So i try this method with no success

#

But it's the only method where i can put my routes dashboard/:id/card without redirecting in my 404 page

#

the two first screen is in my app-routing.module.ts
and the last in my parent component

peak cairn
#

Hi

wispy star
#

You can't import both RouterModule.forRoot() and RouterModule.forChild() (and in fact, you shouldn't even import any of them because you don't need the router module anymore nowadays). forRoot() means: for the root module of the app. forChild() means: in a child module of the app. You probably just want a single array of routes at this point if you're starting with the router. And this AppRoutingModule is completely useless.

@NgModule({
  // ...
  imports: [RouterModule.forRoot(theUniqueArrayOfRoutes)]
})
export class AppModule {}

Or simpler, since modules aren't necessary in Angular anymore:

@NgModule({
  // ...
  providers: [provideRouter(theUniqueArrayOfRoutes)]
})
export class AppModule {}
agile edge
#

with providers can i steel use this in component class ?

image.png
agile edge
wispy star
#

It's not "just one route". It's "just one array of routes".

wispy star
#

Post code, as text. Tell what you want to achieve. Tell what you expect to happen and what happens instead.

agile edge
#

okok

#

i use providers but I still haven't the child component who is post on my page

wispy star
#

Post code, as text. Tell what you want to achieve. Tell what you expect to happen and what happens instead.

agile edge
#

so i have this in my html parent component :

<router-outlet></router-outlet>

my goal it's to show a child component in my parent component in operation of my route so I use this in my app-routing.module.ts in my route const

{
    path:'dashboard/:id',
    component:ControlGuildComponent,
    children:[ 
      {path:'home',component:BotHomeComponent},
      {path:'card',component:BotCardComponent},
      {path:'notif',component:BotNotifComponent},
      {path:'',redirectTo:'home',pathMatch:'full'}
    ]
  },

and I want to put my child in the right next to the navbar (image bellow)

image.png
#

my app component is the header

wispy star
#

OK. So what is the "html parent component "? Is it the ControlGuildComponent? And what is the URL? And what do you expect your app to do? And what does it do instead?

agile edge
#

my url for the page you see is this

image.png
#

and I want to when i am in this URL to show the component BotCardComponent In the right of my ControlGuildComponent but it's just show ControlGuildComponent And when it's /home instead of /card It's show BotHomeComponent instead of BotCardComponent

#

I place ```html
<router-outlet></router-outlet>

In my ControlGuilComponent html but seems to have no effect
wispy star
agile edge
#

Oh I will do this but it's sems I can't use [routerlink] anymore in my html since i use providers instead of imports

<div class="title">
  <h1 [routerLink]="['/accueil']">Dashboard</h1>
</div>
wispy star
#

You can if

  • the component is not standalone but declared in a module that imports RouterModule, or
  • the component is standalone and imports RouterModule, or
  • the component is standalone and imports RouterLink directly.
agile edge
#

Oh when I try to repruduce my code and I do what i want with your StacKblitz example I see that I didn't use imports property like you in my component :

@Component({
  selector: 'app-root',
  templateUrl:'app.component.html',
  styleUrls:['app.component.scss']
})
#

Oh i think i do all my import in @ NgModule of my appmodule class

# 
@NgModule({
  declarations: [
    AppComponent,
    ServerComponent,
    ControlGuildComponent,
    ErrorComponent,
    AccueilComponent,
    ContactComponent,
    BotCardComponent,
    BotNotifComponent,
    BotHomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterOutlet,
    RouterLink
  ],
  providers: [CookieService],
  bootstrap: [AppComponent]
})
export class AppModule { }
#

but all of my [routerlink] it's broke

#

and router-outlet don't work on my ControlGuildComponent

# 
 <a [routerLink]="'/dashboard/' + guild.id + '/notif'">
#

If i tell you that I use this it's maybe helpful :

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
wispy star
#

You keep saying you will post a stackblitz, but you don't. Post a minimal stackblitz reproducing your issues.

agile edge
#

I can't reproduce the error

agile edge
#

When i put the templateUrl instead of template, the application don't work

wispy star