Navmenu items doesn't change unless it's refreshed it.

I have an angular app that has authentication system. Inside the navmenu, I have login, logout and a text that displays username. It works just fine, however, when the user logged in, I still see the same navbar. login should be gone and logout along with username text should be there. But it's not. They are there only when user refreshes the page. I don't know what I'm missing.

Here is my navmenu.component.html

<li *ngIf="!currentUser"><a [routerLink]="['/login']"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li *ngIf="currentUser"><a (click)="logout()"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
<li *ngIf="currentUser"><a><span class="glyphicon glyphicon-user"></span>  </a></li>

And here is my navmenu.component.ts code:

import { Observable } from 'rxjs';
import { User } from './../../models/user';
import { Router } from '@angular/router';
import { AuthService } from './../../services/auth.service';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent implements OnInit {
    currentUser: User;

ngOnInit() {
    this.currentUser = JSON.parse(localStorage.getItem('currentUser') || '');
}


constructor(private authService: AuthService, private router: Router) {  }


   logout() {
      this.authService.logout();
      this.router.navigate(['/home']);
   }
}

Lastly, here is my app.component.html file looks like:

<nav-menu></nav-menu>
<router-outlet></router-outlet>

React BrowserRouter - how to programmatically navigate to different routes?

I currently have this in my app.js file:

<BrowserRouter>
<div>
    <Switch>
        <Route exact path="/" component={CompOne}/>
        <Route path="/two" component={CompTwo} />
    </Switch>
</div>
</BrowserRouter>

In my CompOne, I want to programmatically navigate to CompTwo. I know I can use window.location to navigate to the /two path, but I would like to pass in some props to CompTwo.

How would I go about programmatically navigating from CompOne to CompTwo while passing in props?

Hybrid mobile and desktop using ionic

I want to build a hybrid mobile and web application. I tried using Ionic 3. But had many issues with the desktop version.The application layout is almost same. It will be like using the bootstrap grid. Is there a way I can have the same base code? What is the best way to handle it?

Looking for the right e-learning or web framework/language to achieve goals

First of all, excuse me if im using the wrong tags. I am looking to implement a e-learning solution for my company. Since we are on a tight budget i would have to write something by myself or use opensource e-learning alternatives.

while searching online i find all kind of solutions, but just not what i'm looking for. My question is i'f any of you can recommend opensource solutions or framework/weblanguage that suit my needs. I'm just asking someone to point me in the right direction.

must have requirements: - Solution has to be visually appealing. - Solution is web-only and requires no plugins/downloads. - Users will be presented a series of questions and images. The host (my in this case) needs to map parts of the image (like a multiple-choice question). When user selects corresponding part of image to the question they will get a message.

Nice to have: -Solution scales on mobile devices -User score history -Reporting functionality -Azure AD connection for identification and authentication

Inserting data into two tables at the same time to relate movies to genres

I looking for help, Appreciate.

QUESTION 1 : I am beginner to SQL query in PHP, the problem is HOW to auto insert the movie_id, genre_id into movie_genre table WHEN I insert the movie id, name, genre into movie table at the same time?

QUESTION 2 : In PHP what is the correct way to write prepare query?

QUESTION 3 : In PHP how to write the bind_param query?

SQL query and PHP coding at below:

Table movie:

CREATE TABLE movie (
 id INT,
 name VARCHAR,
 genre VARCHAR,
 PRIMARY KEY (id)  
)

Table genre:

CREATE TABLE genre(
 id INT,
 type VARCHAR,
 PRIMARY KEY (id) 
)

Table movie_genre (many-to-many);

CREATE TABLE movie_genre(
 movie_id INT,
 genre_id INT,
 CONSTRAINT FK_movie_id 
 FOREIGN KEY (movie_id) REFERENCES movie (id),
 CONSTRAINT FK_genre_id 
 FOREIGN KEY (genre_id) REFERENCES genre(id)
)

PHP CODE:

 if($stmt = $conn->prepare("START TRANSACTION"."INSERT INTO movie (id,name,genre) VALUES (?, ?, ?)" ."INSERT INTO movie_genre (movie_id, genre_id) VALUES (?, ?)" ."COMMIT")) {

    $stmt->bind_param("iss"."si",$id, $name, $genre .$name, $genre);
    $stmt->execute();                     
    $stmt->close();

Header image on Custom Wordpress theme not showing up

I have created a custom theme in Wordpress, but my header image and header background color is not showing up. I even tried changing them in the customizer > header settings, but this doesn't work either. Also my custom-logo does not show up. I've tried reuploading all of my files onto FileZilla but nothing seems to be working. Any help would be greatly appreciated, thank you!

<?php

add_theme_support( 'custom-logo', array(

    'flex-width' => false,
    'header-selector' => '.site-title a',
    'default-image' => get_template_directory_uri() . '/assets/img/lake.svg',
) );

function custom_header_settings($wp_customize){

$wp_customize->add_section( 'header_settings' , array(
    'title'      => 'Header Settings',
    'priority'   => 30,
) );

$wp_customize->add_setting( 'background_color' , array(
    'default'    => '#dd8d13',
    'transport'  => 'refresh',
) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array(
    'label'      => 'Background Color',
    'section'    => 'header_settings',
    'settings'   => 'background_color',
) ) );

$wp_customize->add_setting( 'header_textcolor' , array(
    'default'   => '#ffffff',
    'transport' => 'refresh',
) ); 

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
    'label'      => 'Title Color',
    'section'    => 'header_settings',
    'settings'   => 'header_textcolor'
) ) );

$wp_customize->add_setting( 'description_textcolor' , array(
    'default'   => '#ffffff',
    'transport' => 'refresh',
) ); 

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'description_textcolor', array(
    'label'      => 'Description Color',
    'section'    => 'header_settings',
    'settings'   => 'description_textcolor'
) ) );

$wp_customize->add_setting( 'header_background_image', array(
    'default-image' => get_stylesheet_directory_uri() . '/assets/img/test.jpg',
));  

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'header_background_image', array(
'label'    => __( 'Upload Background Image', 'm1' ),
'section'  => 'header_settings',
'settings' => 'header_background_image',
) ) );

}

add_action( 'customize_register', 'custom_header_settings' );
?>

<?php

add_action( 'wp_head', 'cd_customizer_css');

function cd_customizer_css()
{

?>
<style type="text/css">
header {
background-color: <?php echo get_theme_mod('background_color', '#dd8d13'); ?>;
background-image: url(<?php echo get_theme_mod('header_background_image' , '/assets/img/test.jpg'); ?>);
}
header h1{ color: <?php echo get_theme_mod('header_textcolor', '#ffffff'); ?>;
}
header p{ color: <?php echo get_theme_mod('description_textcolor', '#ffffff'); ?>
}
</style>  

<?php 
}
?>

Can I make the Bootstrap 4 navbar switch to a column instead of collapsing?

I would prefer that all my menu items remain visible at all times, and simply switch from a centered row formation into a centered column when the screen size is too small.