Deleting undesired section

< Applying Customizations page

This Wiki page will lead you through the necessary steps to remove a section from the resume template. In case of issues, feel free to enter in our community on and post your questions.

How to delete an existing section?

Let's suppose you don't have any post or article published, therefore, you want to remove the Posts section from the resume template. In the topics below, the removal of the posts section will be explained:

Removing the link from the header (nav-bar)

To remove the link from the header go to the header template file and remove the <li> element(s) of the deleted section(s), in our this example, the posts section is the one that will be removed:

<ul>
    <li><a (click)="resetMenu()" href="#about" i18n="nav@@aboutMe" itemprop="url"><span itemprop="name">About me</span></a></li>
    <li><a (click)="resetMenu()" href="#experience" i18n="nav@@experiences" itemprop="url"><span itemprop="name">Experiences</span></a></li>
    <!--  // Removed section below:
    <li><a (click)="resetMenu()" href="#posts" i18n="nav@@posts" itemprop="url"><span itemprop="name">Posts</span></a></li>
    -->
    <li><a (click)="resetMenu()" href="#contact" i18n="nav@@contact" itemprop="url"><span itemprop="name">Contact</span></a></li>
</ul>

Preview

Notice that the posts menu has been removed:

Removing the section component from the main template

It's also necessary to remove the component from the resume template, in this example, the posts component:

<app-header [activeSection]="activeSection" [pageXOffset]="pageXOffset" [ngClass]="{'sticky' : isSticky}"></app-header>
<app-welcome in-viewport [pageYOffset]="pageYOffset" (inViewport)="onViewport($event.value, 'welcome')"></app-welcome>
<app-about  in-viewport [pageYOffset]="pageYOffset" (inViewport)="onViewport($event.value, 'about')"></app-about>
<app-experience in-viewport [pageYOffset]="pageYOffset" (inViewport)="onViewport($event.value, 'experience')"></app-experience>
<!-- Removed component below:
<app-posts in-viewport [pageYOffset]="pageYOffset" (inViewport)="onViewport($event.value, 'posts')"></app-posts>
-->
<app-contact in-viewport [pageYOffset]="pageYOffset" (inViewport)="onViewport($event.value, 'contact')"></app-contact>
<app-footer></app-footer>

After that, the posts section is not rendered in the resume template.

Updating the router

The Routing file also needs to be updated in order to reflect the deletions in the resume's section(s):

const routes: Routes = [
  { path: '', component: ResumeComponent},
  { path: 'about', redirectTo: '/#about'},
  { path: 'experience', redirectTo: '/#experience'},
  { path: 'experiences', redirectTo: '/#experience'},
  /*  Removed fragment
  { path: 'posts', redirectTo: '/#posts'}, */
  { path: 'contact', redirectTo: '/#contact'},
  { path: '**', redirectTo: '/page-not-found' }
];

Code cleaning up

After applying the topics above, you are ready to do a cleaning up on the code, removing the unused code from the deleted sections/components.