CODEWITHSUNDEEP
javascriptangular
tcetin
tcetin

Reputation: 1089

Can't show directive component Html in a parent component with Angular 8

I am trying to use Child component in a parent to get course data. When I use child component as a directive then I can run child method to fill data to child component html template. But child component directive's html doesnt show up html .

Here is what I tried:

Parent component(CourseListComponent)

@Component({
  selector: 'app-course-uploadfile',
  templateUrl: './course-uploadfile.component.html',
  styleUrls: ['./course-uploadfile.component.less'],
})
export class CourseUploadfileComponent implements OnInit,AfterViewInit  {
  @ViewChild(CourseContentsComponent, {static: false}) contents: CourseContentsComponent;
  public course: Course;
  public errorMessage: string = '';
  currentUser: User;


  constructor(private repository: RepositoryService, private errorHandler: ErrorHandlerService,
    private router: Router, private activeRoute: ActivatedRoute, 
    private authenticationService: AuthenticationService,private http: HttpClient) { 
    }

  ngOnInit() {

    this.currentUser = this.authenticationService.currentUserValue;
    this.getCourse();
    this.contents.getCourseFiles(this.currentUser.id,this.course.id);
  }

  public getCourse() {
    let id: string = this.activeRoute.snapshot.params['id']
    let apiAddress = `api/course/detail/${id}`
    this.repository.getData(apiAddress)
      .subscribe(res => {
        this.course = res as Course;
      },
        (error) => {
          this.errorHandler.handleError(error);
          this.errorMessage = this.errorHandler.errorMessage;
        });
  }

  ngAfterViewInit() {
    this.contents.getCourseFiles(this.currentUser.id,this.course.id);
  }


}

CourseListComponent Html

<app-course-contents></app-course-contents>

Child Directive Component(CourseContentsComponent)

@Directive({selector: 'app-course-contents'})
@Component({
  templateUrl: './course-contents.component.html',
  styleUrls: ['./course-contents.component.less']
})
export class CourseContentsComponent{


  public errorMessage: string = '';
  courseContents : CourseContent[];
  message:string;



  constructor(private repository: RepositoryService, private errorHandler: ErrorHandlerService,
    private router: Router, private activeRoute: ActivatedRoute,
    private authenticationService: AuthenticationService, private http: HttpClient) { 
    }


  public getCourseFiles(teacherId:string,courseId:number){
    let apiAddress = `/api/course/contents?teacherId=${teacherId}&courseId=${courseId}`;
    this.repository.getData(apiAddress)
    .subscribe(res => {
      this.courseContents = res as CourseContent[];
      debugger
    },
      (error) => {
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      });
  }


}

CourseContentsComponent Html Template

<div class="uk-overflow-auto">
<table class="uk-table uk-table-small uk-table-hover uk-table-divider">
        <thead>
            <tr>
                <th>File Name</th>
                <th>File Length</th>
                <th>Created Date</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>

            <tr *ngFor="let content of courseContents">
                <td class="">{{content.fileName}}</td>
                <td>{{content.fileLength}}</td>
                <td>{{content.createdDate | date: 'dd/MM/yyyy hh:m:s'}}</td>
                <td>
                    <a (click)="downloadCourseFile(content.id)"  id="edit" class="uk-icon-link uk-margin-small-right" uk-icon="icon:cloud-download;ratio:1.5"></a>

                </td>
                <td>
                        <a (click)="deleteCourseFile(content.id)"  id="edit" class="uk-icon-link uk-margin-small-right" uk-icon="icon:trash;ratio:1.5"></a>
                </td>
            </tr>
        </tbody>
    </table>

</div>

Please help about this.

Thanks

Upvotes: 0

Views: 57

Answers (1)

Jonathan Seed
Jonathan Seed

Reputation: 2017

It appears that you marking the CourseContentsComponent as both a component, and a directive. In Angular 2+, a "component" is simply a directive with a template (more info here), so the selector should be included in the @Component annotation (similar to the parent component) and the @Directive annotation removed:

@Component({
  selector: 'app-course-contents',
  templateUrl: './course-contents.component.html',
  styleUrls: ['./course-contents.component.less']
})
export class CourseContentsComponent{

Upvotes: 1

Related Questions