import { Component , OnInit , Renderer2 , ViewChild , ElementRef } from '@angular/core' ; @ Component ( { selector : 'app-dynamic-changes' , templateUrl : './dynamic-changes.component.html' , styleUrls : [ './dynamic-changes.component.scss' ] } ) export class DynamicChangesExampleComponent implements OnInit { @ ViewChild ( 'fullpageRef' ) fp_directive : ElementRef ; config ; fullpage_api ; constructor ( private renderer ) { this . config = { licenseKey : 'YOUR LICENSE KEY HERE' , anchors : [ 'firstPage' , 'secondPage' , 'thirdPage' , 'fourthPage' , 'lastPage' ] , menu : '#menu' , navigation : true , sectionsColor : [ '#1bbc9b' , '#4BBFC3' , '#7BAABE' , 'whitesmoke' , '#ccddff' ] , afterLoad : ( origin , destination , direction ) => { } , afterRender : ( ) => { } , afterResize : ( width , height ) => { } , afterSlideLoad : ( section , origin , destination , direction ) => { } } ; } ngOnInit ( ) { } getRef ( fullPageRef ) { this . fullpage_api = fullPageRef ; } addSection ( ) { this . config [ 'sectionsColor' ] = Array ( 6 ) . fill ( 0 ) . map ( x => this . randomColor ( ) ) ; const section = this . renderer . createElement ( 'div' ) ; this . renderer . addClass ( section , 'section' ) ; this . renderer . setProperty ( section , 'innerHTML' , '<h3>New Section</h3>' ) ; this . renderer . appendChild ( this . fp_directive . nativeElement , section ) ; this . fullpage_api . build ( ) ; } removeLast ( ) { const lastSection = this . fp_directive . nativeElement . lastChild ; if ( lastSection . isEqualNode ( this . fullpage_api . getActiveSection ( ) . item ) ) { this . fullpage_api . moveSectionUp ( ) ; } lastSection . remove ( ) ; this . fullpage_api . build ( ) ; } randomColor ( ) { return '#' + Math . random ( ) . toString ( 16 ) . slice ( - 3 ) ; } }